CORS in rails-api and angularJs

Question

I've been trying out all kinds of solutions from the countless other questions on this topic, without any luck...

I'm trying to setup a rails-api project, with a front-end in AngularJs. They will be in different domains. I can make GET requests without any problem. But when I try to do a PUT, I get on Chrome console:

XMLHttpRequest cannot load http://0.0.0.0:3000/thingies/1. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:9000' is therefore not allowed access

Here's what my failed request looks like:

Remote Address:0.0.0.0:3000
Request URL:http://0.0.0.0:3000/thingies/1
Request Method:OPTIONS
Status Code:404 Not Found
Request Headersview source
Accept:*/*
 Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,ja;q=0.6,ko;q=0.4,pt;q=0.2,ro;q=0.2,zh-CN;q=0.2
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:PUT
Cache-Control:no-cache
Connection:keep-alive
Host:0.0.0.0:3000
Origin:http://localhost:9000
Pragma:no-cache
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like           Gecko) Chrome/36.0.1985.143 Safari/537.36
Response Headersview source
Connection:Keep-Alive
Content-Length:17164
Content-Type:text/html; charset=utf-8
Date:Tue, 26 Aug 2014 06:48:06 GMT
Server:WEBrick/1.3.1 (Ruby/2.1.1/2014-02-24)
X-Request-Id:xxxxxx-xxxxxxx-xxxxxx-xxxxxxxxxx
X-Runtime:0.027031

Here's my app.js in AngularJs:

angular
.module('myApp', [
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'restangular',
 ])
.config(function ($routeProvider,RestangularProvider, $httpProvider) {

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.common["Accept"] = "application/json";
$httpProvider.defaults.headers.common["Content-Type"] = "application/json";

$routeProvider
  .when('/', {
    templateUrl: 'views/home.html',
    controller: 'HomeCtrl'
  .otherwise({
    redirectTo: '/'
  });

  RestangularProvider.setBaseUrl('http://0.0.0.0:3000');  

});

This is in my Rails project:

application.rb:

class Application < Rails::Application

config.action_dispatch.default_headers.merge!({
  'Access-Control-Allow-Origin' => '*',
  'Access-Control-Request-Method' => '*'
})
end

My routes.rb, application_controller.rb and thingy_controller are the default scaffolded files. (I've tried modifying them according to other solutions for CORS, without any luck.)

I've used POSTMAN (Chrome Extension) as well, to see if I could use PUT. The requests went through without problems.

I'd really appreciate if someone could point me in the right direction with this!

Answer 1

Try add { 'Content-Type': 'application/x-www-form-urlencoded' } in your $http request like that

$http({
    method : 'POST',
    url    : 'backend.json',
    data   : $.param($scope.yourFormData),  // pass in data as string, important!
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the appropriate headers
})

Answer 2

The Problem is that CORS is blocking your requests. You have to provide the Service and the Application on the same host with the same port. To avoid this problem you could use a Proxy to "map" the url of the service to the url of your application.

Cheers Nighthawk