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

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

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

您可以使用它在本地机器上调试您的应用程序（如果一切正常）。

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

---

我认为这可能是 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 访问您的脚本，调用应该会成功。

---

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

---

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”方法。您还可以要求扩展在服务器已经填充它们时不要覆盖这些标头。

---

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

---

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

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

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

---

Chrome 不允许您集成两个不同的本地主机，这就是我们收到此错误的原因。您只需包含来自 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();控制台.log(r); } 读（）;

---

好吧，另一种方法是使用 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。然后它发出请求以获取该服务器的响应。最后，代理应用

访问控制允许来源：*

对那个最初的回应。

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

您可以在 Medium 3 Ways to Fix the CORS Error 上阅读有关解决方案的更多信息

---

请在 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

---