请求的资源错误中不存在“Access-Control-Allow-Origin”标头

Question

我正在尝试获取新闻网站的提要。以为我会使用谷歌的提要 API 将 feedburner 提要转换为 json。以下网址将从提要中返回 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 无法加载 http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi。 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此，不允许访问 Origin 'http://localhost'。

我该如何解决这个问题？

Answer 1

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

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

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

通知： 如果 URL 损坏，则扩展名是 Access-Control-Allow-Origin: *。我建议您在不处理内容时禁用此扩展程序，因为例如 youtube 不适用于此扩展程序。

Answer 2

我相信这可能是Chrome不支持localhost通过Access-Control-Allow-Origin——see Chrome issue

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

127.0.0.1   localhost yourdomain.com

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

Answer 3

试试这个 - 通过如下设置标头来设置 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 4

cors unblock 适用于 chrome 78 [CORs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

这是一个名为“cors unblock”的谷歌浏览器插件

总结： 启用后，通过将“Access-Control-Allow-Origin: *”标头附加到本地和远程 Web 请求，不再出现 CORS 错误

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

Answer 5

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

由于浏览器安全限制，大多数“Ajax”请求都受same origin policy的约束；请求无法从不同的域、子域、端口或协议成功检索数据。

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

Answer 6

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

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

然后全部完成。

Answer 7

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

@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 代理，您只需在 URL 前添加 https://cors-anywhere.herokuapp.com/。这样您的 URL 将类似于 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 10

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

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

Answer 11

请在 Spring 启动控制器（类级别或方法级别）中的 backendside 上使用 @CrossOrigin，作为 Chrome 错误的解决方案 'No 'Access-Control-Allow-Origin' 标头存在于请求的资源上。'

这个解决方案 100% 对我有用 ...

示例：类级别

@CrossOrigin
@Controller
public class UploadController {

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

示例：方法级别

@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