关于javascript：请求的资源错误上没有“Access-Control-Allow-Origin”标头


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

我正在尝试获取新闻网站的Feed。 我以为我会使用google的feed API将feedburner Feed转换为json。 以下网址将以json格式从Feed返回10个帖子。http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

我使用以下代码来获取上面的url的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
$.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) {
    //.....
  }
});

但它没有工作，我收到以下错误

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.

我该如何解决？

相关讨论

如果您使用谷歌浏览器浏览器，则可以使用扩展程序进行攻击。

您可以在应用中找到可随时修改CORS标头的Chrome扩展程序。显然，这只是Chrome，但我喜欢它可以在任何地方进行零更改。

您可以使用它在本地计算机上调试您的应用程序(如果一切都在生产中)。

注意：
如果URL断开，则扩展名称为Access-Control-Allow-Origin：*。我建议您在不处理任何内容时禁用此扩展名，因为例如，youtube不适用于此扩展程序。

相关讨论

我相信Chrome可能不支持localhost通过Access-Control-Allow-Origin - 请参阅Chrome问题

要让Chrome在标头中发送Access-Control-Allow-Origin，只需将/ etc / hosts文件中的localhost别名替换为其他域，例如：

1
127.0.0.1   localhost yourdomain.com

然后，如果您使用yourdomain.com而不是localhost访问脚本，则调用应该成功。

相关讨论

试试这个 - 通过设置标题来设置Ajax调用，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
    }                
});

然后使用以下命令行打开Chrome来运行代码：

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

仅供参考，我注意到jQuery文档中的这些信息，我认为这些信息适用于此问题：

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.

像@thanix这样更改主机文件对我来说不起作用，但@dkruchok提到的扩展确实解决了这个问题。

对于开发，您可以使用https://cors-anywhere.herokuapp.com，生产更好地设置您自己的代理

1
2
3
4
5
6
async function read() {
   let r= await (await fetch('https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi')).json();
   console.log(r);
}

read();

如果它调用spring boot服务。你可以使用下面的代码处理它。

1
2
3
4
5
6
7
8
9
10
11
12
13
@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS")
                    .allowedHeaders("*","Access-Control-Allow-Headers","origin","Content-type","accept","x-requested-with","x-requested-by") //What is this for?
                    .allowCredentials(true);
        }
    };
}

Chrome不允许您集成两个不同的localhost，这就是我们收到此错误的原因。您只需要从nuget manager中包含Microsoft Visual Studio Web Api Core包。并在WebApiConfig.cs文件中的WebApi项目中添加两行代码。

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

然后全部完成。

请在Spring启动控制器的backendside上使用@CrossOrigin(类级或方法级别)，因为Chrome错误'No 'Access-Control-Allow-Origin'标头的解决方案出现在请求的资源上。

这个解决方案100％为我工作......

Example : Class level

1
2
3
@CrossOrigin
@Controller
public class UploadController {

- - - 要么 - - - -

Example : Method level

1
2
3
4
5
6
7
@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
相关讨论