如何解决'重定向已被CORS策略阻止:没有'Access-Control-Allow-Origin'标题'？

Question

我正在使用vue js开发应用程序.根据我的设置,我需要在设置更改时将变量传递给我的url.

$.get('http://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) { 
  // some code...
});

但是当我的应用程序点击url时,它会显示以下消息.

无法加载http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26:从' http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-重定向已被CORS政策阻止10-26 '到' http://172.16.1.157:8002 / firstcolumn://-03-1207-10-26/':没有'Access-Control-Allow-Origin'标题是出现在请求的资源上.因此,不允许来源" http:// localhost:8080 "访问.

Answer 1

除了awd提到让负责服务器的人重新配置(本地开发的一个不切实际的解决方案)之外,我使用了一个像这样的change-origin chrome插件:

https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc

你可以让你local dev server (ex: localhost:8080)看起来像是来自172.16.1.157:8002 or any other domain.

Answer 2

我假设您只是前端开发人员，并且您无权访问应用程序的后端（关于问题的标签）。

关于如何在您的情况下正确解决此问题的简短回答？你不能，你需要别人。

这是关于什么的？

你需要明白 CORS 是一个安全问题，它不仅仅是为了好玩而惹恼你。其目的主要是防止使用从非白名单前端到后端的
（恶意）HTTP 调用，并进行一些关键的突变。

您可以观看此YouTube 视频或任何其他视频，但我建议您观看视觉视频，因为基于文本的解释可能很难理解。

您还需要了解，如果您使用Postman或任何其他工具来尝试 API 调用，您将不会遇到 CORS 问题。原因是这些工具不是 Web 前端，而是一些基于服务器的工具。

因此，如果有些东西在那里工作但在你的 Vue 应用程序中不起作用，请不要感到惊讶，上下文是不同的。

现在，如何解决这个问题？

1. 根据后端团队使用的框架，语法可能会有很大不同，但总的来说，您需要告诉他们提供类似的内容Access-Control-Allow-Origin: http://localhost:3000（或您将使用的任何其他端口）。

PS：使用Access-Control-Allow-Origin: *会非常危险，因为它会允许任何人访问它，因此建议采用更严格的规则。

2. 如果您正在使用某个服务，例如发送短信、付款、某些 Google 控制台或其他内容的 API，您需要允许您localhost进入该服务的仪表板。向您的经理或技术主管索取凭据。
3. 如果您有权访问后端，您可以自行操作，如下所示（本例中为 ExpressJS）：https://flaviocopes.com/cors/

如何以肮脏的方式破解它？

如果你非常着急并且想要得到一些非常脏的东西，你可以使用其他答案中列出的许多不同的技巧，这里有一个快速列表：

• 使用任何能够创建中间件并将请求转发到后端的扩展（它会起作用，因为它不是直接来自您的前端）
• 强制您的浏览器禁用 CORS，不确定这实际上如何解决问题
• 使用代理，如果您使用 Nuxt2，@nuxtjs/proxy是一种流行的代理，但任何类型的代理（即使是真正的后端也可以完成这项工作）
• 任何其他与上面列出的 3 个相关的黑客行为......

最后，解决 CORS 问题可以非常快速且轻松地完成。您只需要与您的团队沟通或找到您身边的东西（如果您有权访问某些服务的后端/管理仪表板）。

我强烈建议从一开始就尝试把它做好，因为它与安全相关，并且可能会在路上被遗忘......

Answer 3

使用 npm：

要允许跨域请求，请安装“cors”：

npm i cors

在服务器端添加以下内容：

let cors = require("cors");
app.use(cors());

Answer 4

如果您可以控制服务器，则可以使用 PHP：

<?PHP
header('Access-Control-Allow-Origin: *');
?>

Answer 5

此问题的批准答案无效。

您需要在服务器端代码上设置标头

app.use((req,res,next)=>{
    res.setHeader('Access-Control-Allow-Origin','*');
    res.setHeader('Access-Control-Allow-Methods','GET,POST,PUT,PATCH,DELETE');
    res.setHeader('Access-Control-Allow-Methods','Content-Type','Authorization');
    next(); 
})

您还可以尝试使用 Chrome 扩展来自动添加这些标头。

Answer 6

当您在 Chrome 上遇到此问题时，您不需要扩展程序。
从控制台启动 Chrome：

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

也许您必须关闭 Chrome 中的所有选项卡并重新启动它。

Answer 7

请维护服务器的人员http://172.16.1.157:8002/将您的主机名添加到Access-Control-Allow-Origin主机,服务器应返回类似于以下内容的标头,并带有响应 -

Access-Control-Allow-Origin: yourhostname:port

Answer 8

谢谢，我在chrome上解决了这个扩展问题。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Answer 9

您好 如果我理解正确，您正在对与您的页面所在的域不同的域执行XMLHttpRequest。因此浏览器会阻止它，因为出于安全原因，它通常允许来自同一来源的请求。当您想要进行跨域请求时，您需要做一些不同的事情。关于如何实现这一点的教程是Using CORS。

当您使用邮递员时，他们不受此政策的限制。引自Cross-Origin XMLHttpRequest：

常规网页可以使用 XMLHttpRequest 对象从远程服务器发送和接收数据，但它们受到同源策略的限制。扩展没有那么有限。扩展可以与其源之外的远程服务器通信，只要它首先请求跨源权限。

Answer 10

到CORS授权添加到使用Apache的头，简单地添加以下线内无论是<Directory>，<Location>，<Files>或<VirtualHost>你的服务器配置（通常位于一个* .conf文件，如httpd.conf中或的apache.conf）的部分，或内一个.htaccess文件：

标头集 Access-Control-Allow-Origin "*"

然后重启apache。

更改标头需要使用 mod_headers。Mod_headers 在 Apache 中默认启用，但是，您可能需要确保它已启用。

Answer 11

我在 Vue.js 和 SpringBoot 项目中遇到了同样的问题。如果有人使用 spring，你可以添加以下代码：

@Bean
public FilterRegistrationBean simpleCorsFilter() {  
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
    CorsConfiguration config = new CorsConfiguration();  
    config.setAllowCredentials(true); 
    // *** URL below needs to match the Vue client URL and port ***
    config.setAllowedOrigins(Collections.singletonList("http://localhost:8080")); 
    config.setAllowedMethods(Collections.singletonList("*"));  
    config.setAllowedHeaders(Collections.singletonList("*"));  
    source.registerCorsConfiguration("/**", config);  
    FilterRegistrationBean bean = new FilterRegistrationBean<>(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);  
    return bean;  
}   

我在这篇文章中找到了解决方案使用 Spring Boot 和 Vue.js 构建一个简单的 CRUD 应用程序