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

Question

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

错误如下共享：

Access to XMLHttpRequest at ' http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx ' from origin ' http://192.168.0.x ' has been blocked by CORS 策略：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”header。

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

使用的工具/应用程序：

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. URL http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx
2. 从 postman 尝试：它可以工作，将令牌附加到 postmane 并得到响应。
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);
  });

4. Checked for 2 days now about CORS error and found that this is enabled by default in Laravel 7. Not sure why I am seeing this error even after using Laravel 7. There are very few answers or solutions specific to VueJS with Laravel 7.

问题：

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

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

Answer 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 window。 现在，再次运行您的程序（npm run serve / npm run dev），这次您将不会收到任何 CORS 错误，并且能够使用 axios 获取请求。

希望这可以帮助！