如何解决“重定向已被 CORS 策略阻止: 没有‘访问控制-允许-起源’头”？

我正在使用 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.
1290685 次浏览
小开

要求维护 http://172.16.1.157:8002/服务器的人员将您的主机名添加到 Access-Control-allow-Origin 主机，服务器应该返回一个类似于以下带响应的头-

Access-Control-Allow-Origin: yourhostname:port
小开

你好，如果我理解它的权利，你正在做一个 XMLHttpRequest到一个不同的域比你的网页上。因此浏览器阻塞了它，因为出于安全原因，它通常允许在同一个源中发出请求。当您想要执行跨域请求时，需要执行一些不同的操作。关于如何实现这一点的教程是 使用 CORS。

当你使用邮递员时，他们不受此政策的限制。引自 交叉起源 XMLHttpRequest:

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

小开
最佳答案

除了上面提到的让服务器负责人重新配置(一个不切实际的本地开发解决方案)之外，我还使用了一个改变源代码的 chrome 插件，如下所示:

莫西夫原点和 CORS 改变器

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

小开

谢谢大家，我解决了这个扩展的铬。

允许 CORS: 访问控制-允许-起源

小开

您正在从本地开发服务器向外部域 172.16.1.157:8002/发出请求，这就是为什么它会提供跨源异常。 要么你必须允许头 Access-Control-Allow-Origin:*在两个前端和后端或另外使用这个扩展 Cors 头切换-chrome 扩展，除非你主机后端和前端在同一个域。

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

输入“ https”。

小开

您可以使用 Firefox 附加组件 CORS Everywhere CORS Everywhere 临时解决这个问题。只要打开 Firefox，按下 Ctrl + Shift + A，搜索插件并添加它！

小开

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

标题设置访问-控制-允许-起源“ *”

然后重启阿帕奇。

修改报头需要使用 mod _ header。默认情况下，Apache 中启用了 Mod _ headers，但是，您可能需要确保启用了它。

小开

如果您可以控制服务器，那么可以使用 PHP:

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

我在 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 应用程序中找到了解决方案

小开

您必须自定义浏览器的安全性，或通过自定义安全性允许权限。(这对于您的本地测试是不切实际的) 想了解更多请浏览这个链接。
Https://developer.mozilla.org/en-us/docs/web/http/cors

小开

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

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

例如:

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

我的命令如下:

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

如果你能注意到下面的行，那么它应该为你工作。

< 进入-控制-允许-来源: *

希望这个能帮上忙。

小开

当你有这个问题与 Chrome，你不需要一个扩展。
从控制台启动 Chrome: < br > < br > Chrome.exe —— user-data-dir = “ C:/Chrome dev session”—— able-web-security < br >
也许你需要关闭 Chrome 中的所有标签页并重新启动它。

小开

你不会相信的, 请确保在“ url”的末尾添加“ .”

这个代码也出现了类似的错误:

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 和字符编码，但事实是，你可能并不关心。试着加一个点，也许对你也有用。

当我加上“ .”的时候，一切都很顺利。

我希望这对你也有用。

小开

使用 npm:

为了允许跨来源请求安装“ cors”:

npm i cors

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

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

安装:

npm i cors

然后包括 cors () :

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


});
小开

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

小开

对这个问题的批准答案是无效的。

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

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 扩展来自动添加这些头文件。

小开

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

1. 请求标题中的 我们必须允许 CORS，放置访问-控制-允许-起源: 可能无法工作。安装一个谷歌扩展，以启用 CORS 请求。 *

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

3.确保那个流浪汉得到了补给。尝试流浪者向上——规定这使本地主机连接到家园的 db。

  1. 尝试更改 header 的内容类型 这一点非常重要。
小开

我遇到这个错误的原因是我没有为不同的环境更新路径。

小开

除了 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

小开

我将假设您只是一个前端开发人员，并且不能访问应用程序的后端(关于问题的标签)。

简短回答如何 适当地解决这个在你的情况下? 你不能，你需要别人。

这是怎么回事？

你需要明白 CORS 是一个 安全问题，它不只是在这里烦你只是为了好玩。
它的目的主要是防止使用(恶意的) HTTP 调用从 非白名单前端到您的后端的一些关键的变化。

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

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

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

现在，怎么解决这个问题？

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

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

  1. 如果你正在使用一个服务，比如一个 API 来发送短信、支付、一些谷歌控制台或者其他东西，你需要允许你的 localhost在服务的仪表板上。向你的经理或技术主管申请证书。
  2. 如果您可以访问后端，那么您可以自己完成，如下所示(本例中的 ExpressJS) : https://flaviocopes.com/cors/

如何用肮脏的方式黑进去？

如果你非常着急，想要做一些非常肮脏的事情，你可以使用其他答案中列出的许多不同的技巧，这里有一个快速列表:

  • 使用 任何延期，它能够创建一个中间件并将请求转发到后端(它将工作，因为它不是直接来自您的前端)
  • 强制你的浏览器到 关闭 CORS，不知道这将如何实际解决这个问题
  • 使用代理，如果你使用 Nuxt2，@ nuxtjs/proxy是一个流行的代理，但任何类型的代理(甚至一个真正的后端将做这项工作)
  • 任何与上述三人有关的黑客行为。

最后，解决 CORS 问题可以相当快速和容易地完成。您只需要与您的团队进行沟通，或者找到自己方面的一些东西(如果您可以访问某些服务的后端/管理指示板的话)。

我强烈建议尝试从一开始就做好它，因为这关系到安全，而且它可能会被遗忘在路上... ..。

小开

我尝试了这段代码，它对我很有用

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

提交答案