9

I have two separate apps on the same server, with the EmberJS one trying to do cross-domain calls to my backend API.

I set up my backend API to allow cross-domain requests from that specific origin. Is there a way however, to avoid using JSONP with such a set up? $.ajax is blocking cross-domain requests before they ever get sent. If not, what is the point of CORS, which server-side I had implemented to accept requests from my JS front-end source?

EDIT

AJAX request:

$.ajax({
    url: "api.lvh.me:3000/accounts/login",
    data: cred,
    type: "POST",
    xhrFields: {
        withCredentials: true
    },
    success: function(response){
        alert('succeeded!');
        console.log(response);
        alert(response);
    },
    failure: function(message){
        alert("failed");
        console.log(message);
        alert(message);
    }
});
Flostin
  • 30
  • 1
  • 6
darksky
  • 20,411
  • 61
  • 165
  • 254
  • Why dont you simply reverse proxy the backend so that CORS problem does never occur? Edit: I don't think that $.ajax blocks those requests, since it has to ask the server whether they are allowed or not ... – Coxer Jun 26 '13 at 11:26
  • Doesn't reverse proxy allow all cross-origin requests? – darksky Jun 26 '13 at 12:03
  • 1
    Have you tried prepending 'http://' to the url attribute in the $.ajax call? – Ike Jun 26 '13 at 16:44

3 Answers3

10

There is no need to use JSONP if you enable CORS. 

Access-Control-Allow-Origin: http://www.example.com

if this header is set in the response, then normal XmlHttpRequest will be able to access the response as if it is like same domain. Check whether this header is set correctly.

I hope that this link will help you if you are using jquery A CORS POST request works from plain javascript, but why not with jQuery?

Update: Example 

var xmlhttp= new XMLHttpRequest();
var url="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control";
xmlhttp.open("GET",url,false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send();

Try this in any domain, you will get response.

Update solution:

Request url without "http://" caused the problem, prepending "http://" solved the issue

Community
  • 1
  • 1
Balaji Sivanath
  • 506
  • 4
  • 14
  • I did add `Access-Control-Allow-Origin: *` in the header response but I still keep getting the same error. I am using jQuery 1.9 so that issue with jQuery vs. JS shouldn't be an issue. Please see my edit for the jQuery AJAX request I am sending. – darksky Jun 26 '13 at 12:06
  • 6
    How can we *enable CORS??* – SweetWisher ツ Feb 20 '14 at 08:27
0

You can use rack-cors in Rails 5, to set it to allow all URLs.

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [
      :get, :post, :put, :patch, :delete, :options, :head
    ]
  end
end
XY L
  • 25,431
  • 14
  • 84
  • 143
0

In cross-domain environment I suggest to use JSONP instead CORS becase many free hosts does not support cross-domain CORS. It is detailed in working examples - both JSONP and CORS.

Leon Rom
  • 537
  • 4
  • 6