如何解决\'重定向已被 CORS 策略阻止：否 \'Access-Control-Allow-Origin\' header\'？答案

【问题标题】：How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?如何解决\'重定向已被 CORS 策略阻止：否 \'Access-Control-Allow-Origin\' header\'？
【发布时间】：2022-07-05 09:37:52
【问题描述】：

我正在使用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 而不是 localhost。尝试用谷歌搜索你的 ip 并用 @Black 替换'localhost'
一句警告：Moesif Origin & CORS Changer 插件要求您输入与工作相关的电子邮件地址才能访问高级设置。我不会推荐。

【解决方案2】：

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

Allow CORS: Access-Control-Allow-Origin

【讨论】：

链接现在已断开:(
链接断开，完全没有描述。
chrome.google.com/webstore/detail/allow-cors-access-control/…
扩展只是一个临时修复，而不是问题的解决方案
这不是解决方案。你是要让大家都安装一个chrome扩展吗？

【解决方案3】：

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

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

【讨论】：

最好添加到 .htaccess 文件中，这将适用于整个项目，而不仅仅是您添加此 sn-p 的站点。
我可以知道如何从角度解决这个问题吗？
对我来说它甚至没有达到 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 开发会话" --disable-web-security

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

【讨论】：

简单而完美。我的完整路径是这样的： "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/Chrome dev session" --disable-web-security

【解决方案6】：

使用 npm：

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

npm i cors

在服务器端添加这个：

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

【讨论】：

不工作

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

此问题的批准答案无效。

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

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 扩展来自动添加这些标题。

【讨论】：

【解决方案9】：

要使用 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，无论您使用什么。

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

【讨论】：

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

【解决方案12】：

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

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

例如：

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

我的命令如下：

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

如果您能注意到以下行，那么它应该对您有用。

<访问控制允许来源：*

希望这可以帮助。

【讨论】：

【解决方案13】：

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

关于如何做的简短回答适当地在你的情况下解决这个问题？你不能，你需要别人。

这是关于什么的？

您需要了解 CORS 是安全的事情，这里不只是为了好玩而惹恼你。
其目的主要是防止使用来自非白名单前端到你的后端有一些关键的突变。

你可以看看这个YouTube video 或其他任何一个，但我推荐一个视觉视频，因为基于文本的解释可能很难理解。

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

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

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

根据您的后端团队使用的框架，语法可能完全不同，但总体而言，您需要告诉他们提供类似Access-Control-Allow-Origin: http://localhost:3000 的内容（或您将使用的任何其他端口）。
PS：使用Access-Control-Allow-Origin: * 会有很大风险，因为它允许任何人访问它，因此建议使用更严格的规则。

如果您正在使用服务（例如 API 来发送 SMS、付款、某些 Google 控制台或其他东西），您需要在服务的仪表板中允许您的 localhost。向您的经理或技术主管索取凭据。

如果您有权访问后端，您可以自己访问，如下所示（本例中为 ExpressJS）：https://flaviocopes.com/cors/

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

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

使用能够创建中间件并将请求转发到后端的any extension（它会起作用，因为它不是直接来自您的前端）

强制您的浏览器使用disable CORS，不确定这将如何实际解决问题

使用代理，如果您使用 Nuxt2，@nuxtjs/proxy 是一种流行的代理，但任何类型的代理（即使是真正的后端也可以完成这项工作）

任何其他与上面列出的 3 个相关的黑客...

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

我强烈建议从一开始就尝试正确使用它，因为它与安全性有关，并且可能会被遗忘......

【讨论】：

【解决方案14】：

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

【讨论】：

【解决方案15】：

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

【讨论】：

感谢这有助于避免所有麻烦并从 localhost 测试代码。

【解决方案16】：

你不会相信的，确保添加“。”在“网址”的末尾

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

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 调用。

【解决方案17】：

安装：

npm i cors

然后包括 cors()：

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

});

【讨论】：

【解决方案18】：

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

【讨论】：

【解决方案19】：

除了 Berke Kaan Cetinkaya 的回答。
如果您可以控制您的服务器，您可以在 ExpressJs 中执行以下操作：

app.use(function(req, res, next) {
// update to match the domain you will make the request from
res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

https://enable-cors.org/server_expressjs.html

【讨论】：

【解决方案20】：

我试过这段代码，它对我有用。你可以在这个link中看到文档

var io = require("socket.io")(http, {
cors: {
    origin: "*",
    methods: ["GET", "POST"]
   }
 })

【讨论】：

试试这个还是报错

【解决方案21】：

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

【讨论】：

【解决方案22】：

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

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

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

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

尝试更改标题的内容类型。标题：{'内容类型' : 'application/x-www-form-urlencoded;字符集=UTF-8；应用程序/json'} 这一点非常重要。

【讨论】：

【解决方案23】：

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

只需输入“https”。

【讨论】：