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

Question

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

错误，如下所述：]：

访问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”标头 资源。

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

使用的工具/应用程序：

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

调试工作：

1. URL 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);
  });

4. 现在检查了2天有关CORS错误的信息，发现默认情况下在Laravel 7中启用了此功能。不确定使用Laravel 7后为何仍会看到此错误。很少有针对Larue 7的VueJS的答案或解决方案。

问题：

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

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

用例：VueJS / Laravel应用具有库存。使用SOAP API调用Magento2从VueJS / Laravel更新数量。错误如下：在http：//xx.yyy.abc.123/rest/V1 / ...

Answer 1

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