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

我正在尝试获取新闻网站的供稿。以为我会使用Google的feed API将feedburner供稿转换为json。以下网址将以json格式从Feed中返回10个帖子。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”标头。因此，不允许访问源“ http：// localhost ”。

我该如何解决？

我认为这可能是因为Chrome不支持localhost通过Access-Control-Allow-Origin- 请参阅Chrome问题

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

127.0.0.1   localhost yourdomain.com

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

如果您使用的是Google Chrome浏览器，则可以使用扩展程序进行入侵。

您可以在应用程序中找到一个可以即时修改CORS标头的Chrome扩展程序。显然，这仅是Chrome浏览器，但我喜欢它在任何地方都零变化的情况下工作。

您可以将其用于在本地计算机上调试应用程序（如果一切都可以在生产环境中运行）。

注意：如果URL断开，扩展名是Access-Control-Allow-Origin：*。我建议您在不使用自己的东西时禁用此扩展程序，例如，因为youtube不适用于该扩展程序。

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

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

由于浏览器安全性的限制，大多数“ Ajax”请求都受相同的原始策略约束；该请求无法从其他域，子域，端口或协议成功检索数据。

更改主机文件（如@thanix）对我不起作用，但是@dkruchok提到的扩展名确实解决了该问题。

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

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

然后全部完成。

如果其调用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);
        }
    };
}

对于开发，您可以使用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();

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

这是Google Chrome的插件，名为“ cors unblock”

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

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

好吧，另一种方式是使用cors代理，您只需在URL之前添加https://cors-anywhere.herokuapp.com/，因此您的URL就像https://cors-anywhere.herokuapp.com/http ：//ajax.googleapis.com/ajax/services/feed/load。

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

Access-Control-Allow-Origin: *

对最初的回应。

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

您可以在“中等3种解决CORS错误的方法 ”中阅读有关此解决方案的更多信息

请使用@CrossOrigin在backendside春季引导控制器（或者类级别或方法级）作为铬错误溶液'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