No 'Access-Control-Allow-Origin' header is

问题:

I\'m trying to fetch the feed of a news website. Thought I\'d use google\'s feed API to convert the feedburner feed into json. The following url will return 10 posts from the feed, in json format. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

I used the following code to get the contents of above url

$.ajax({
            type:\"GET\",
            dataType:\"jsonp\",
            url:\"http://ajax.googleapis.com/ajax/services/feed/load\",
            data:{\"v\":\"1.0\", \"num\":\"10\", \"q\":\"http://feeds.feedburner.com/mathrubhumi\"},

            success: function(result){
                //.....
            }
        });

but it\'s not working and I\'m getting the following error

XMLHttpRequest cannot load http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi. No \'Access-Control-Allow-Origin\' header is present on the requested resource. Origin \'http://localhost\' is therefore not allowed access.

How do I fix this?

回答1:

I believe this might likely be that Chrome does not support localhost to go through the Access-Control-Allow-Origin -- see Chrome issue

To have Chrome send Access-Control-Allow-Origin in the header, just alias your localhost in your /etc/hosts file to some other domain, like:

127.0.0.1   localhost yourdomain.com

Then if you\'d access your script using yourdomain.com instead of localhost, the call should succeed.

回答2:

If you use Google Chrome browser you can hack with an extension.

You can find a Chrome extension that will modify CORS headers on the fly in your application. Obviously, this is Chrome only, but I like that it works with zero changes anywhere at all.

You can use it for debugging your app on a local machine (if everything works in production).

Notice: If URL becomes broken the extension name is Access-Control-Allow-Origin: *. I recommend you to disable this extension when you not working on your stuff, because, for example, youtube does not work with this extension.

回答3:

Try this - set Ajax call by setting up the header as follows:

var uri = \"http://localhost:50869/odata/mydatafeeds\"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader(\"Authorization\", \"Negotiate\");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

Then run your code by opening Chrome with the following command line:

chrome.exe --user-data-dir=\"C:/Chrome dev session\" --disable-web-security

回答4:

Just FYI, I noticed this information from the jQuery documentation which I believe applies to this issue:

Due to browser security restrictions, most \"Ajax\" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

Changing the hosts file like @thanix didn\'t work for me, but the extension mentioned by @dkruchok did solve the problem.

回答5:

You can also install this extension if you are on Chrome.

Access-Control-Allow-Origin: *

回答6:

Chrome doesn\'t allow you to integrate two different localhost,that\'s why we are getting this error. You just have to include Microsoft Visual Studio Web Api Core package from nuget manager.And add the two lines of code in WebApi project\'s in your WebApiConfig.cs file.

var cors = new EnableCorsAttribute(\"*\", \"*\", \"*\");
config.EnableCors(cors);

Then all done.

回答7:

Please use @CrossOrigin on the backendside in Spring boot controller (either class level or method level) as the solution for Chrome error \'No \'Access-Control-Allow-Origin\' header is present on the requested resource.\'

This solution is working for me 100% ...

Example : Class level

@CrossOrigin
@Controller
public class UploadController {

----- OR -------

Example : Method level

@CrossOrigin(origins = \"http://localhost:3000\", maxAge = 3600)
@RequestMapping(value = \"/loadAllCars\")
    @ResponseBody
    public List<Car> loadAllCars() {


Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework