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

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

使用的工具/应用：

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

调试工作：

URL 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中启用此功能。。

问题：

此错误是什么意思。我以为它只是从webpage1调用到webpage2，它似乎不起作用。
我需要在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窗口。现在，再次运行程序（npm run serve / npm run dev），这一次您将不会收到任何CORS错误，并且可以使用axios来获取请求。

希望这会有所帮助！

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

1 个答案: