Question

我试图获取新闻网站的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的内容

$.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。 No＆＃39; Access-Control-Allow-Origin＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost＆＃39;因此不允许访问。

我该如何解决这个问题？

Answer 1

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

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

您可以使用它在本地计算机上调试您的应用程序（如果所有内容都在生产中）。

<强>通知：如果网址被破坏，则扩展名称为 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

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

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

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

Answer 5

如果其调用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 6

解禁解禁非常适合Chrome 78 [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和获取方法的控制。用户可以从工具栏按钮打开和关闭扩展名。要修改这些标题的更改方式，请使用右键单击上下文菜单项。您可以自定义允许的方法。默认选项是允许'GET'，'PUT'，'POST'，'DELETE'，'HEAD'，'OPTIONS'，'PATCH'方法。您也可以要求扩展程序在服务器已填充标头时不要覆盖这些标头。

Answer 7

嗯，另一种方式是使用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: *

原始回复。

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

您可以在此处3 Ways to Fix the CORS Error

了解更多有关该解决方案的信息

Answer 8

解决它们的另一种方法是在包含 '@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 9

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

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

然后全部完成。

Answer 10

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

请使用Spring启动控制器中int array[10] = {10, 20}; //It initialises all rest of the elements to zero.上的@CrossOrigin（类级别或方法级别），因为所请求资源上存在Chrome错误backendside标头的解决方案。“ / p>

此解决方案100％为我工作......

示例：班级

'No 'Access-Control-Allow-Origin'

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

示例：方法级别

@CrossOrigin
@Controller
public class UploadController {

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

11 个答案: