My application consists of two parts - an Angular frontend and a Rails server. Since they are on different domains, requests do not work by default. I have tried various solutions, including adjusting the stack, but nothing seems to work for me.
Below is the method in my Angular controller:
$scope.test =->
# transform = (data) ->
# $.param data
$http.post('http://localhost:3000/session/create', 'token=some',
headers:
'Access-Control-Allow-Origin': 'http://localhost:9000',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With'
# transformRequest: transform
).success (responseData) ->
console.log(responseData)
I have commented out the transform data function, but it did not affect the server response.
I have also configured my app as follows:
.config ["$httpProvider", ($httpProvider) ->
$httpProvider.defaults.useXDomain = true
delete $httpProvider.defaults.headers.common["X-Requested-With"]
]
I suspect this configuration may be causing the request to not behave like AJAX (though I'm not certain).
However, all my headers seem to be in one field
Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-headers, access-control-allow-methods, content-type Request URL:http://localhost:3000/session/create
Request Method:OPTIONS
Status Code:404 Not Found
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,ru;q=0.6
Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-headers, access-control-allow-methods, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
DNT:1
Host:localhost:3000
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.8 Safari/537.36
Response Headers
Content-Length:12365
Content-Type:text/html; charset=utf-8
X-Request-Id:2cf4b37b-eb47-432a-ab30-b802b3e33218
X-Runtime:0.030128
Chrome console shows:
OPTIONS http://localhost:3000/session/create 404 (Not Found) angular.js:6730
OPTIONS http://localhost:3000/session/create No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. angular.js:6730
XMLHttpRequest cannot load http://localhost:3000/session/create. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. localhost/:1
Other details:
class ApplicationController < ActionController::Base
before_filter :allow_cross_domain_access
protected
def allow_cross_domain_access
headers['Access-Control-Allow-Origin'] = '*'# http://localhost:9000
headers['Access-Control-Allow-Headers'] = 'GET, POST, PUT, DELETE'
headers['Access-Control-Allow-Methods'] = %w{Origin Accept Content-Type X-Requested-With X-CSRF-Token}.join(',')
headers['Access-Control-Max-Age'] = '1728000'
end
end
Routes are set with post "session/create". The session controller looks like this:
class SessionController < ApplicationController
respond_to :json, :html, :js
def create
respond_with "logged in"
# render nothing: true
end
end
I am using the latest version of Angular 1.2.0.rc-2. You can find my project on GitHub here.