如何解决“重定向已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头”？答案

【问题标题】：How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?如何解决“重定向已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头”？
【发布时间】：2018-03-13 08:40:28
【问题描述】：

我正在使用Vue js 开发一个应用程序。根据我的设置，我需要在设置更改时将变量传递给我的 URL。

<!-- language: lang-js -->

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

但是当我的应用点击 URL 时，它会显示以下消息。

Failed to load http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26: Redirect from 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26' to 'http://172.16.1.157:8002/firstcolumn/2017-03-01/2017-10-26/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

【问题讨论】：

这个问题是因为同源策略阻止响应被接收，因为由于端口号的不同，发起/接收域不同。要解决此问题，您需要在来自http://172.16.1.157:8002/firstcolumn/... 的响应中返回 CORS 标头。具体如何执行取决于您使用的服务器端基础架构。
Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?的可能重复
在这种情况下，Origin A 向 Origin B 发出 GET 请求；响应重定向到 Origin B 中的不同位置。解决方案是诱使 Chrome 认为 Origin B 是 Origin A。如果 Origin B 重定向到 Origin C 怎么办？我们可以直接指向任何 Origin C，还是必须欺骗 Origin C 以显示为 Origin A？我认为我们可以重定向到任何 Origin C（例如重定向到第三方单点登录页面或 www.stackoverflow.com ），无论 Origin A 或 Origin C 的 Access-Control-Allow-Origin 标头如何)
在我的情况下，没有一个答案有效，最后结果是我的中间件（在本地服务器中）出现错误。以防它帮助某人

标签： javascript jquery vuejs2

【解决方案1】：

除了 awd 提到的让负责服务器的人员重新配置（本地开发的一个不切实际的解决方案）之外，我还使用了一个 change-origin chrome 插件，如下所示：

Moesif Orign & CORS Changer

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

【讨论】：

我不知道如何设置它，你能进一步解释一下吗？截图会很好。
@altShiftDev 这个插件是否有任何选项可以处理：“对预检请求的响应未通过访问控制检查：预检请求不允许重定向。”？
尝试把你的真实IP而不是本地主机。尝试用谷歌搜索你的 ip 并用 @Black 替换“localhost”
很好的建议
一句警告：Moesif Origin & CORS Changer 插件要求您输入与工作相关的电子邮件地址才能访问高级设置。我不会推荐。

【解决方案2】：

谢谢大家，我通过chrome上的这个扩展解决了。

Allow CORS: Access-Control-Allow-Origin

【讨论】：

链接现在断开了:(
链接失效，完全没有描述。
更新链接我的朋友！
chrome.google.com/webstore/detail/allow-cors-access-control/…
扩展只是一个临时修复，并不是问题的解决方案

【解决方案3】：

如果你可以控制你的服务器，你可以使用 PHP：

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

【讨论】：

最好添加到 .htaccess 文件中，这将适用于整个项目，而不仅仅是您添加此 sn-p 的站点。
我可以知道如何从角度解决这个问题吗？
非常感谢！这有效...... Cheerio！
对我来说它甚至没有到达 php 脚本

【解决方案4】：

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

Access-Control-Allow-Origin: yourhostname:port

【讨论】：

@RoryMcCrossan 它说起源是本地主机，所以 cors 被触发。我想？

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

要使用 Apache 将 CORS 授权添加到标头，只需在服务器配置的 <Directory>、<Location>、<Files> 或 <VirtualHost> 部分中添加以下行（通常位于 *.conf文件，例如 httpd.conf 或 apache.conf），或在 .htaccess 文件中：

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

然后重启apache。

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

【讨论】：

添加到我的本地项目的.htaccess 中并像魅力一样工作，不要忘记重新启动您的服务器/mamp/apache，无论您使用什么。

【解决方案8】：

使用 npm：

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

npm i cors

在服务器端添加这个：

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

【讨论】：

不起作用，伙计。

【解决方案9】：

我在 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;  
}

我在这篇文章中找到了解决方案Build a Simple CRUD App with Spring Boot and Vue.js

【讨论】：

【解决方案10】：

您正在从本地开发服务器向外部域 172.16.1.157:8002/ 发出请求，这就是它给出跨源异常的原因。要么您必须在前端和后端都允许标头Access-Control-Allow-Origin:*，要么使用此扩展名cors header toggle - chrome extension，除非您将后端和前端托管在同一个域中。

【讨论】：

嘿，提供的 chrome 扩展链接已损坏。你能更新答案吗？

【解决方案11】：

尝试在终端中运行此命令，然后再次测试。

curl -H "origin: originHost" -v "RequestedResource"

例如：

如果我的originHost 等于https://localhost:8081/ 并且我的RequestedResource 等于https://example.com/

我的命令如下：

curl -H "origin: https://localhost:8081/" -v "https://example.com/"

如果您能注意到以下行，那么它应该适合您。

希望这会有所帮助。

【讨论】：

【解决方案12】：

此问题的批准答案无效。

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

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

【讨论】：

【解决方案13】：

您可以使用 Firefox 插件 CORS Everywhere 暂时解决此问题。只需打开火狐，按 Ctrl+Shift+A ，搜索插件并添加即可！

【讨论】：

感谢这有助于避免所有麻烦并从本地主机测试代码。

【解决方案14】：

你不会相信的， 请务必添加“。”在“网址”的末尾

我在这段代码中遇到了类似的错误：

fetch(https://itunes.apple.com/search?term=jack+johnson)
.then( response => {
    return response.json();
})
.then(data => {
    console.log(data.results);
}).catch(error => console.log('Request failed:', error))

我得到的错误：

 Access to fetch at 'https://itunes.apple.com/search?term=jack+johnson'
 from origin 'http://127.0.0.1:5500' has been blocked by CORS policy:
 No 'Access-Control-Allow-Origin' header is present on the requested
 resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

但经过大量研究后，我意识到问题在于我没有复制来自 iTunes API 文档的正确 URL 地址。

应该是

https://itunes.apple.com/search?term=jack+johnson.

不是

https://itunes.apple.com/search?term=jack+johnson

注意最后的点

对于为什么点很重要引用有关 DNS 和字符编码的问题有一个很大的解释，但事实是您可能并不关心。尝试添加可能对您也有用的点。

当我添加“。”时一切都像魅力一样。

我希望它也对你有用。

【讨论】：

这似乎对我不起作用，它实际上破坏了 API 调用。

【解决方案15】：

请指定@CrossOrigin(origins = "http://localhost:8081") 在控制器类中。

【讨论】：

【解决方案16】：

您必须为您的浏览器自定义安全性或通过自定义安全性来允许权限。（这对于您的本地测试是不切实际的）了解更多请点击链接。
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：

【解决方案17】：

安装：

npm i cors

然后包含 cors():

app.get("/list",cors(),(req,res) =>{

});

【讨论】：

【解决方案18】：

我遇到此错误的原因是我没有针对不同环境更新路径。

【讨论】：

【解决方案19】：

这些错误可能是由于以下原因引起的，请确保遵循以下步骤。将本地主机与本地虚拟机（主机）连接起来。在这里，我将 http://localhost:3001/ 连接到 http://abc.test 要遵循的步骤：

1.我们必须允许 CORS，将 Access-Control-Allow-Origin: 放在请求的标头中可能不起作用。安装支持 CORS 请求的 google 扩展程序。*

2.确保您在请求中提供的凭据有效。

3.确保已配置 vagrant。尝试 vagrant up --provision 这使本地主机连接到宅基地的数据库。

尝试更改标题的内容类型。 header:{ 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8;application/json' } 这一点非常重要。

【讨论】：

【解决方案20】：

只需在 httpd.conf 文件中添加以下文本即可解决此问题。

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

【讨论】：

【解决方案21】：

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

只需输入“https”即可。

【讨论】：