Question

我正在使用VueJS应用，我想使用Yahoo! Shopping API（文档：https://developer.yahoo.co.jp/webapi/shopping/shopping/v1/itemsearch.html），以使用商品条码获取商品。但是，我一直收到CORS错误，我不确定为什么或如何使它起作用。我的代码如下：

data() {
  return {
    appId: 'dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-',
    apiUrl: 'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch'
  }
}

...

axios.get(this.apiUrl, {
  params: {
    appid: this.appId,
    jan: 4589707054951
  }
})
.then((response) => {
  console.log(response);
})
.catch((error) => {
  alert(error)
})

我得到的具体错误是：

在以下位置访问XMLHttpRequest 'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch?appid=dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-&jan=4589707054951' 来自来源“ https://0.0.0.0:8080”的信息已被CORS政策阻止：否请求中存在“ Access-Control-Allow-Origin”标头资源。

我该怎么做才能使它起作用？到目前为止，唯一可行的方法是使用CORS Chrome扩展程序，但这自然仅用于测试。

非常感谢。

Answer 1

服务器/ api所有者需要在其响应头中发送此消息：或者，如果您有服务器设置面板或其他内容，请确保从发出请求的位置添加域。

访问控制允许来源：“您的域在这里”。

请在以下网址阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 2

我遇到了同样的错误。我以以下方式解决了它。

发生此错误是因为我们试图访问另一台服务器上托管的数据。 CORS问题是浏览器问题，其中某些浏览器确实允许您访问托管在其他服务器或虚拟服务器上的内容。如果您观察到正在运行的应用程序位于本地主机（https://0.0.0.0:8080）上，并尝试访问https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch上托管的数据。您只需在vue应用程序中添加几行代码即可解决此问题。

步骤1：在vue应用程序的根目录中（位于package.json文件旁边）创建一个名为vue.config.js的新文件。在vue.config.js文件中添加以下代码：

module.exports = {
   devServer:{
   proxy: "https://shopping.yahooapis.jp" 
  }
}

注意：https://shopping.yahooapis.jp是您的基本URL。

步骤2：现在，返回到data（）中的代码。用https://0.0.0.0:8080替换apiUrl的域名/基本URL。现在您的apiUrl将为https://0.0.0.0:8080/ShoppingWebService/V1/json/itemSearch。

data() {
  return {
    appId: 'dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-',
    apiUrl: 'https://0.0.0.0:8080/ShoppingWebService/V1/json/itemSearch'
  }
}

步骤3：重新启动您的应用程序。例如，npm运行发球。

Answer 3

我找到了另一种无需创建代理服务器或模拟服务器即可使用的解决方案。您可以在网络浏览器中禁用用于访问跨源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来获取请求。

希望这会有所帮助！

Axios GET请求导致CORS错误

3 个答案: