No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401

I am trying to make rest call from my controller it’s showing error in console like

jquery.js:9566 OPTIONS https://url/api/ 401 (Unauthorized)

localhost/:1 XMLHttpRequest cannot load https://url/api/ . Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access. The response had HTTP status code 401.

this is my code in controller

Ember.$.ajax( {

            method : 'GET',
	url : 'myapiurl',
        
	headers: {
            "Authorization" : "Basic abcdef=="
        },

}).then((response) => {

console.log(“response”);

//console.log(JSON.stringify(response));

});

and i tried with these options also

contentType: “application/json; charset=utf-8”,

	jsonp: false,
	jsonpCallback: "localJsonpCallback",
	cache:true,

when i use jsonp:false then i got error like unauthorised

and also i found in stack-overflow is


For ajax requests to work backend should serve the proper ‘Access-Control-Allow-Origin’ header in response. Otherwise your browser would not accept such responses and throw an error that you are seeing. It’s not Ember related in any way it’s just how browsers work.

Now to fix this issue you would have to add the proper client server name to your backend ‘Access-Control-Allow-Origin’ headers. I.e. if you are going to serve your Ember app from https://example.com that is what you need to add to ‘Access-Control-Allow-Origin’ header.


then i start ember with ember s --proxy url

still there is no success , and i want to know there is any other way to make rest call not from the controller ,i tried same code in route handler. please help me thank you

As the stack overflow answer points out, the problem is not anywhere in your Ember app code/config. It is the API that needs to have a header added. Is this a custom API that you wrote, or is it a public API?

If it’s a custom API you need to add that header to your responses.

If it’s a public API like a google API, etc, there is usually a configuration step where you “whitelist” an origin address. That basically tells the API ‘it’s ok to serve requests from clients with origin address x’

1 Like

Thank you @dknutsen for your valuable response. I found a solution to the error (No access-control-allow-origin ) , first thing if we want to make any rest call through our controller we make a request through the proxy.

so first start ember server with proxy

$ ember s --proxy https://www.abc.com/api

after that we make our rest call with only our respected method, not whole URL

Ember.$.ajax( {

        method : 'GET',
url : '/friends',

}).then((response) =>{

}

so in URL no need that domain name etc, directly calls our method that’s enough .

in this way, I solve the issue(No access-control-allow-origin).

cheers Happy EMBERING.

@shivakrishna just a note: that will definitely work if you only plan to use the app on your local machine, but if you ever plan to deploy the app to a static hosting site like S3, etc. that will not work. You’d need to host it somewhere that had a similar server which could proxy the requests. It is not recommended that you use ember serve to serve production code.

Yes @dknutsen you are right. my previous solution works on my local machine. Can I know how can I achieve the same functionality when I am hosting it somewhere?

This is happening because of the CORS (Cross Origin Resource Sharing) . For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. You are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. You’re on domain example.comm , and you want to make a request to domain example.nett . To do so, you need to cross domain boundaries. JSONP is really a simple trick to overcome the XMLHttpRequest same domain policy. So, instead of using XMLHttpRequest we have to use < script > HTML tags, the ones you usually use to load JavaScript files , in order for JavaScript to get data from another domain.