时间戳

首页 > 解决方案 > Laravel7 CORS：被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”

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

问题描述

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

错误如下共享：

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

注意：我是这个领域的初学者。我可能会问一些愚蠢的问题。请容忍我并在这里请求帮助。

使用的工具/应用程序：

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

调试工作：

  1. 网址http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx
  2. 从邮递员那里试过：它有效，将令牌附加到邮递员并得到响应。
  3. 从 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);
  });
  1. 现在检查了 2 天关于 CORS 错误的信息，发现在 Laravel 7 中默认启用了此功能。不知道为什么即使在使用 Laravel 7 后我也会看到此错误。使用 Laravel 7 的 VueJS 特定的答案或解决方案很少。

问题：

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

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

标签： phplaravelvue.jscorsmagento2

解决方案

在处理 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 获取请求。

希望这可以帮助！

推荐阅读