No 'Access-Control-Allow-Origin' header is present on the requested resource.

Question

In my Angularjs app I'm getting this issue (No 'Access-Control-Allow-Origin) when I try to make a GET request from YouTube.

...
myServices.factory('YouTubeService', function ($resource) {
    return $resource('http://www.youtube.com/oembed?url=:url', {}, {
        query: { method: 'GET', isArray: true },
    })
});
...

called with:

YouTubeService.query({url: url}, function(response) {
    alert(response)
})

I know it's to do with making a request from a different domain but I've no idea how to get around it. There are loads of questions already on this but I can't get anything from any of them.

I have tried this in my config block:

delete $httpProvider.defaults.headers.common['X-Requested-With'];

but this doesn't do anything!

checkout the accepted answer here: http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource-w — Jai, May 30 '14 at 11:05
correct! seems to me that you tube does not provide that what you want to access. — Jai, May 30 '14 at 11:13
sorry deleted my comment - everything points to adding `$httpProvider.defaults.useXDomain = true;` and `delete $httpProvider.defaults.headers.common['X-Requested-With'];` but this doesn't make a difference — tommyd456, May 30 '14 at 11:15
So how does anyone make a Cross Site Request using Angular - can it not be done??? — tommyd456, May 30 '14 at 11:21
decided to send to the back-end (Node) and let that take care of it. — tommyd456, May 30 '14 at 11:51

score 1 · Answer 1 · answered May 30 '14 at 12:28

In my opinion, one of the best ways to solve it is using a proxy – I use nginx running on a machine and create a proxy for the API I want to access, and write custom header directives in nginx to add the headers to the response from the proxy before sending it to the frontend.

Something like;

    location /APIProxy {
            resolver 8.8.8.8; # or the DNS of your choice
            proxy_pass http://<original_api_url>;
            proxy_http_version 1.1;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
    }

For more, refer to this.

Do **NOT** use a publicly accessible DNS server such as `8.8.8.8`. [To prevent DNS spoofing, it is recommended configuring DNS servers in a properly secured trusted local network.](http://nginx.org/en/docs/http/ngx_http_core_module.html#resolver) — Tim, Oct 07 '16 at 20:17

score 0 · Answer 2 · answered May 31 '14 at 12:52

The problem is the service you are trying to call does not allow requests from your host. (I.E. does not that a "Access-Control-Allow-Origin: *" header). The easiest was to go about this is to develop a rest server that will accept the request and then send it to the service you wish to call. The following headers must be present in your restserver for it to work properly

Access-Control-Allow-Origin: * (To accept request from any domain) Access-Control-Allow-Headers: Content-Type (to allow the content-type header) Access-Control-Allow-Credentials: true (to accept cookie and other credentials)

If you are developing the restserver in PHP, you should add the headers on the construct function of the restserver class or on the beginning of the method function (eg public function post())

This is how to add an header in php

`header('Access-Control-Allow-Origin: *');`

header('Access-Control-Allow-Headers: Content-Type'); header('Access-Control-Allow-Credentials: true');

You might want to add an OPTIONS method too

No 'Access-Control-Allow-Origin' header is present on the requested resource.

2 Answers2