Laravel 7 CORS：被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”

Posted 2023-03-04

【中文标题】Laravel 7 CORS：被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”

【英文标题】：Laravel7 CORS : blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'

【发布时间】：2020-09-25 23:37:15

【问题描述】：

用例：VueJS/Laravel 应用有库存。使用 SOAP API 调用 Magento2 从 VueJS/Laravel 更新 Qty。

错误如下分享：

访问 XMLHttpRequest 在 'http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx' 来自原点“http://192.168.0.x”已被 CORS 策略阻止： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

注意：我是这个领域的初学者。我可能会问一些愚蠢的问题。请耐心等待我在这里寻求帮助。

使用的工具/应用程序：

Laravel Framework 7.9.2 /在http://192.168.0.x上运行 VueJS /在http://192.168.0.x上运行 Magento2 /在http://xx.yyy.abc.123上运行 Postman（用于测试 SOAP API 的工具）

调试工作：

网址http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx 从邮递员那里试过：它有效，将令牌附加到邮递员并得到了响应。 从 VueJS/Laravel 应用程序对 Magento2 进行 AXios 调用：（失败）

Origin: http://192.168.0.x 
Magento2: http://xx.yyy.abc.123

  axios.post("http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx",
  

  )
  .then((response) =>
  
        console.log("response.data",response.data);
        this.apiResponse = response.data;
        //this.getproduct();
  )
  .catch(error =>
  
       alert('ERROR GETCATEGORY!!!! No Data found');
       console.log(error.response);
  );

现在检查了 2 天关于 CORS 错误，发现在 Laravel 7 中默认启用此功能。不知道为什么即使在使用 Laravel 7 后我仍会看到此错误。对于带有 Laravel 7 的 VueJS 的答案或解决方案很少.

问题：

这个错误是什么意思。我以为它只是从webpage1调用webpage2，它似乎不起作用。 我是否需要对我的 VueJS/Laravel 应用程序进行任何更改。我还有什么遗漏吗？

如果您在这方面需要更多信息来帮助我，请告诉我。 谢谢你的帮助。 问候，

【问题讨论】：

CORS 需要在 Magento2 应用中而不是在 Laravel 应用中启用

谢谢.. 一个澄清是这在安全部分是否有任何问题，因为 Magento2 将运行支付网关或安全部分的任何问题或威胁。

阻止 CORS 请求是为了为您的用户提供安全性，因此如果您取消阻止它们，您需要确保传入的请求确实来自 Laravel。所以Access-Control-Allow-Origin 明确具有允许的来源，而不是使用*

所以会是Access-Control-Allow-Origin:192.168.0.x ..所以基本上需要添加Origin ip，这样其他人就无法访问了。如果我的理解有误，请纠正我。再次感谢您。

您不希望您的一位用户访问站点 evil.com 并且该站点代表用户发送 CORS 请求以购买商品

【参考方案1】：

我在处理 Vue.js 项目时遇到了同样的 CORS 错误。我终于在今天早上解决了这个问题。您可以通过构建代理服务器或其他方式来解决此问题，即禁用浏览器的安全设置（例如，CHROME）以访问跨源 API。这两种解决方案都对我有用。后一种解决方案是最简单的解决方案，不需要构建任何模拟服务器或代理服务器。这两种方案都可以在前端解决。

您可以通过在终端上键入以下命令来禁用浏览器 (CHROME) 安全设置以从源头访问 api：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security

在终端上运行上述命令后，将打开一个禁用安全设置的新 chrome 窗口。现在，再次运行您的程序（npm run serve / npm run dev），这一次您不会收到任何 CORS 错误，并且可以使用 axios 获取请求。

希望这会有所帮助！

【讨论】：

感谢您花时间回复。感谢。您能否确认在哪个终端（Win 或 ubuntu）上，或者我们也可以从 chrome 设置中进行设置？...一旦我有更多详细信息，将尝试与您分享更新。谢谢。

我用的是mac终端。我只使用命令行来做到这一点。我猜这个命令也可以在 ubuntu 终端上运行，也可以通过 windows cmd 运行。试一试。

非常感谢。你让我今天一整天都感觉很好。它对我有用。 C:\Program Files (x86)\Google\Chrome\Application>chrome.exe --disable-web-security --disable-gpu --user-data-dir=~/ChromeTemp