Vue.js 中 axios 跨域访问错误问题及解决方法

Vue.js中的axios跨域访问错误，如何解决？一篇文章带你搞定！

亲爱的开发者朋友们，你是否在使用Vue.js和axios进行跨域请求时遇到过困扰？今天，我将为大家详细介绍这一问题的解决方法，希望对你的项目开发有所帮助。

一、问题现象

假设你的接口地址是（php api接口），而你的开发环境地址是。当你使用axios发起请求时，可能会遇到如下错误：

`Failed to load : The value of the 'Aess-Control-Allow-Origin' header in the response must not be the wildcard '' when the request's credentials mode is 'include'. Origin ' is therefore not allowed access.`

二、解决方案

1. 配置代理：我们需要修改项目中的`config/index.js`文件，设置代理表(proxyTable)。例如：

```javascript

proxyTable: {

'/apis': { // 这里的'/apis'是代理前缀，可以根据实际需求修改

target: ' // 接口的实际地址

changeOrigin: true, // 更改目标URL，使其与代理的URL匹配

}

}

},

```

2. 重启开发服务器：修改配置后，务必重启你的开发服务器（`npm run dev`），以确保新的配置生效。这一步非常重要，否则配置不会生效。

3. 发起请求：配置完成后，你可以通过代理转发的方式访问接口。例如：

```javascript

this.$api.get('/apis/index.php?act=login', {

// 请求参数

"act": "login"

}).then(response => {

// 请求成功的处理逻辑

}).catch(error => {

// 请求失败的处理逻辑

});

```

这样，你就可以成功解决跨域访问的错误了。特别提醒，PHP端无需进行任何header设置，因为跨域问题的解决是在前端进行的。很多网上的教程可能会误导你进行后端设置，但实际上，在这种情况下，并不需要。

以上就是长沙网络推广为大家带来的Vue.js中axios跨域访问错误问题及解决方法的详细介绍。希望这篇文章能帮助到你。如果你有任何疑问或需要进一步的帮助，请给我留言，我会及时回复大家的。感谢大家对狼蚁SEO网站的支持！如果你喜欢这篇文章，请转发分享给更多的开发者朋友。让我们一起学习，共同进步！