时间戳

首页 > 解决方案 > Axios GET 请求导致 CORS 错误

vue.js - Axios GET 请求导致 CORS 错误

问题描述

我正在开发一个 VueJS 应用程序，我想使用 Yahoo! 使用其条形码获取产品的购物 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)
})

我得到的具体错误是：

CORS 策略已阻止从源“ https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch?appid=dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-&jan=4589707054951 ”访问 XMLHttpRequest ：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我能做些什么来完成这项工作？到目前为止，它唯一的工作方式是使用 CORS Chrome 扩展，但这自然只是为了测试。

非常感谢。

标签： vue.jscorsaxios

解决方案

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

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

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

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

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

第 2 步：现在，回到 data() 中的代码。将 apiUrl 的域名/基本 url 替换为https://0.0.0.0:8080。现在您的 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 run serve。

推荐阅读