如何解决\'Redirect has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header\'？

【问题标题】：How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?如何解决\'Redirect has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header\'？
【发布时间】：2022-10-27 07:23:13
【问题描述】：

我正在使用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 vue.js 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

【讨论】：

【解决方案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 它说 origin 是本地主机，所以触发了 cors。我认为？
【解决方案5】：

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

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

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

【讨论】：

  • 简单而完美。我的完整路径是这样的：“C:Program Files (x86)GoogleChromeApplicationchrome.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】：

此问题的批准答案无效。

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

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

【讨论】：

  • 我在标题中设置了这些。我仍然收到 CORS 错误。
【解决方案8】：

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

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

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

【讨论】：

    【解决方案9】：

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

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

    这是关于什么的？

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

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

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

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

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

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

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

      1. 如果您正在使用一项服务，例如用于发送短信、付款、某些 Google 控制台或其他东西的 API，您需要在该服务的仪表板中允许您的 localhost。向您的经理或技术主管索取证书。
      2. 如果您有权访问后端，您可以自己访问，如下所示（本例中为 ExpressJS）：https://flaviocopes.com/cors/

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

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

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

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

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

    【讨论】：

    • 阅读第一段后，我脸上最美丽的笑容之一。我读过的关于 CORS 的唯一解释是非常有力的解释。很好的解释。
    【解决方案10】：

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

    标头设置 Access-Control-Allow-Origin "*"

    然后重启apache。

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

    【讨论】：

    • 添加到我的本地项目的.htaccess 并且工作起来很有魅力，无论您使用什么，都不要忘记重新启动您的服务器/mamp/apache。
    【解决方案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;  
}

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

    【讨论】：

      【解决方案12】：

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

      【讨论】：

      • 嘿，提供的 chrome 扩展链接已损坏。你能更新答案吗？
      【解决方案13】：

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

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

      例如：

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

      我的命令如下：

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

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

      < 访问控制允许来源：*

      希望这可以帮助。

      【讨论】：

        【解决方案14】：

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

        【讨论】：

          【解决方案15】：

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

          【讨论】：

          • 感谢这有助于避免所有麻烦并从本地主机测试代码。
          【解决方案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】：

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

            【讨论】：

              【解决方案19】：

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

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

              【讨论】：

              • 试试这个仍然出错
              【解决方案20】：

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

              【讨论】：

                【解决方案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 请求的谷歌扩展。*

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

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

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

                  【讨论】：

                    【解决方案23】： 
                    $.get('https://172.16.1.157:8002/firstcolumn/' + c1v + '/' + c1b, function (data) { 
  // some code...
});

                    只需输入“https”。

                    【讨论】：

                      猜你喜欢
                      • 2021-08-12
                      • 1970-01-01
                      • 1970-01-01
                      • 2020-05-05
                      • 2019-08-02
                      • 2016-07-10
                      • 2014-11-01
                      • 2013-12-09
                      • 2017-12-29
                      相关资源
                      最近更新 更多
                      热门标签
                      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode