如何处理 JavaScript 或 jQuery 中的 CORS 错误？

Posted 2023-03-04

【中文标题】如何处理 JavaScript 或 jQuery 中的 CORS 错误？

【英文标题】：How to handle CORS error in JavaScript or jQuery?

【发布时间】：2021-11-13 03:40:01

【问题描述】：

我是新手，目前正在学习。在开发 Web 应用程序时，我遇到了

CORS 策略已阻止从源“https://localhost”访问“http://localhost/m/document/019286313eb7ce6_20210915125851.jpeg.webp”获取：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源

我用谷歌搜索并阅读了一些东西，但我仍然无法弄清楚如何解决这个问题。

我无权访问服务器，因为我只使用 API。所以我只想知道 jQuery 可以解决 CORS 问题还是必须在后端设置？我确实安装了 chrome 扩展以快速修复我的测试开发目的，但我只想知道是否有另一种方法来解决这个问题

这是我尝试过的

 fetch('http://localhost/m/document/019286313eb7ce6_20210915125851.jpeg.webp', 
          method: "GET",
          headers: 
              "accept": "application/json",
              "Access-Control-Allow-Origin":"*"
          
        )
        .then(res => res.blob())
        .then(blob => 
            
            myBlob = blob;
            console.log(myBlob);
        );

【问题讨论】：

尝试从http://localhost 运行您的前端代码？也就是说，非https。或者，如果 http://localhost/m/document/019286313eb7ce6_20210915125851.jpeg.webp（非 https）确实是您发出请求的 URL，并且您的前端位于 http://localhost，请尝试使用 https://localhost/m/document/019286313eb7ce6_20210915125851.jpeg.webp（https）。否则，如果这些确实是您的 URL，那么您遇到该 CORS 错误的原因是从 https://localhost URL 到 http://localhost 的请求是跨域请求 - 因为他的 https-vs-http 不匹配。

@sideshowbarker 天哪，你是赢家！！！！感谢您的光临。我对这个错误非常头疼。我没有意识到https-vs-http mismatch. 是个问题。谢谢

【参考方案1】：

CORS 错误可能是一场噩梦。 CORS 标头，即 Access-Control-Allow-Origin 是 RESPONSE HEADER，您不能在 CLIENT 设置响应标头。其目的是保护来自未知域的服务器响应，这些域扩展为禁止使用 API。 在您的情况下，因为您无权访问服务器。你有选择

“继续使用 chrome 扩展，暂时允许您的开发机器访问 API”。 更改 SERVER 的标头以包含您的域。 （需要服务器访问权限） 独立访问 API 并将结果作为文件（JSON 文件）提供给您的应用程序。 配置代理：您可以定义将来自路径 /m 的任何请求转发到前端开发服务器上的 http://localhost/m。由于您的开发服务器是与后端 API 通信的中间人，因此可以安全地避免 CORS。

【讨论】：

我可以了解更多关于选项 3 的信息吗？这意味着我必须更改我的 xampp 中的设置？

我删除了该选项，意识到您的 CORS 问题是因为您从 https-localhost 访问 http-localhost。能否详细介绍一下前端和 api 的域。

【参考方案2】：

出于现代浏览器的安全原因，您依赖于服务器，因此绕过此问题的最佳方法是使用代理服务器来代理您的请求并自动为您的服务器启用 CORS

【讨论】：

代理服务器，例如 herokuapp ？ link