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

Question

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

我用下面的代码得到上面的内容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) {
    //.....
  }
});

但它不起作用，我收到以下错误

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.

我该如何解决这个问题？

Answer 1

我认为这可能是 Chrome 不支持 localhost 通过 Access-Control-Allow-Origin -- see Chrome issue

要让 Chrome 在 header 中发送 Access-Control-Allow-Origin，只需将 /etc/hosts 文件中的本地主机别名为其他域，例如：

127.0.0.1   localhost yourdomain.com

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

Answer 2

试试这个 - 通过如下设置 header 来设置 Ajax 调用：

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：

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

Answer 3

如果您使用 Google Chrome 浏览器，您可以使用扩展程序破解。

您可以在您的应用程序中找到一个 Chrome extension 来动态修改 CORS headers。显然，这只是 Chrome，但我喜欢它可以在任何地方进行零更改。

您可以使用它在本地计算机上调试您的应用程序（如果生产环境一切正常）。

注意事项：如果 URL 损坏，则扩展名为 Access-Control-Allow-Origin: *。我建议您在不处理自己的东西时禁用此扩展程序，因为例如，youtube 不适用于此扩展程序。

Answer 4

请在 Spring 引导控制器（class 级别或方法级别）中的 backendside 上使用 @CrossOrigin 作为 Chrome 错误的解决方案 'No 'Access-Control-Allow-Origin' header 出现在请求的资源上。'

此解决方案对我 100% 有效...

Example : Class level

@CrossOrigin
@Controller
public class UploadController {

----- 或 ------

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

Answer 5

Chrome 不允许您集成两个不同的本地主机，这就是我们收到此错误的原因。您只需要包含来自 nuget manager.And 的 Microsoft Visual Studio Web Api 核心包，然后在您的 WebApiConfig.cs 文件中的 WebApi 项目中添加两行代码。

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

那就大功告成了。

Answer 6

仅供参考，我从 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 提到的扩展确实解决了问题。

Answer 7

如果它调用spring引导服务。您可以使用以下代码处理它。

@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);
        }
    };
}

Answer 8

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

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();

Answer 9

cors unblock 非常适合 chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

它是 google chrome 的插件，名为 "cors unblock"

总结： 启用

时，通过将 'Access-Control-Allow-Origin: *' header 附加到本地和远程 Web 请求，不再出现 CORS 错误

此扩展通过为浏览器收到的每个请求提供自定义 "access-control-allow-origin" 和 "access-control-allow-methods" header 来控制 XMLHttpRequest 和获取方法。用户可以从工具栏按钮打开和关闭扩展。要修改这些 header 的更改方式，请使用 right-click 上下文菜单项。您可以自定义允许的方法。默认选项是允许 'GET'、'PUT'、'POST'、'DELETE'、'HEAD'、'OPTIONS'、'PATCH' 方法。您还可以要求扩展不要在服务器已经填充这些 header 时覆盖它们。

Answer 10

好吧，还有一种方法是使用cors代理，你只需要添加https://cors-anywhere.herokuapp.com/ before your URL.so your URL will be like https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load.

代理服务器从上面的URL接收到http://ajax.googleapis.com/ajax/services/feed/load。然后它发出请求以获取该服务器的响应。最后，代理应用

Access-Control-Allow-Origin: *

原始回复。

这个解决方案很棒，因为它适用于开发和生产。总之，您正在利用同源策略仅在浏览器到服务器通信中实现的事实。这意味着它不必在服务器到服务器的通信中强制执行！

您可以在 Medium 3 Ways to Fix the CORS Error

上阅读有关解决方案的更多信息

Answer 11

解决它们的另一种方法是在包含 '@SpringBootApplication' 的主应用程序 class 中添加以下代码，并在需要时重新启动服务器。这对我有用。

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
        corsConfiguration.setAllowedHeaders(Arrays.asList("Origin","Access-Control-Allow-Origin",
                "Content-Type","Accept","Authorization","Origin,Accept","X-Requested-With",
                "Access-Control-Request-Method","Access-Control-Request-Headers"));
        corsConfiguration.setExposedHeaders(Arrays.asList("Origin","Content-Type","Accept","Authorization",
                "Access-Control-Allow-Origin","Access-Control-Allow-Origin","Access-Control-Allow-Credentials"));
        corsConfiguration.setAllowedMethods(Arrays.asList("GET","PUT","POST","DELETE","OPTIONS"));
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
        
    }

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

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

javascript

ajax

jquery

json

cors