如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin
更新时间：2023年10月24日 09:56:47 作者：ShiyuTim
这篇文章主要介绍了如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue请求接口出现跨域问题
在使用axios请求了接口后，发现并没有请求到，F12里面出现如下图所示的报错
这是提示跨域了。
所有使用JavaScript的浏览器都会支持同源策略。
同源策略即指域名/协议/端口号相同。
只要有一个不同，就会当作跨域请求。
解决方法
一种是让后端接口里添加如下两句代码：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
当然求人不如求己，自己在项目里面设置代理
- 如果使用vue-cli脚手架创建的项目,找到
config文件夹下的index.js文件。 - 找到
dev下的proxyTable {}
举个例子：
如果请求接口为http://www.baidu.com/user/info/list,请求头为http://www.baidu.com/，那么就添加
"/user": {
target: "http://www.baidu.com/",
changeOrigin: true,
}
然后找到请求页面，在axios的请求接口里面只写/user/info/list就行了。
更新： 另外一种配置方法：
同样是更改config/index.js的配置文件：
module.exports = {
dev: {
proxyTable: {
'/api/: {
target: 'http://www.baidu.com/',
changeOrigin: true,
pathRewrire: {
'^/api': ''
}
}
}
}
上面的配置表示，遇到接口路径有api的，就换成http://www.baidu.com/这个请求头，同时把api去掉。
因为跨域问题一般只存在开发环境，所以我们可以把axios进行如下配置：
if(process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = '/'
} else {
axios.defaults.baseURL = '/api/'
}
这样，我们在开发环境下，就可以通过增加api这个来配置跨域。
在Vue-cli3.0以上版本时
在项目根目录下新建vue.config.js文件，在该文件内新增如下配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://baidu.com',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
}
剩下的axios配置跟上面一样，更多关于vue.config.js的配置文件请参考官方文档吧
ok，就设置完成了，当然最后一步千万不要忘了：
关掉页面，从新npm run dev一下，要不即使设置代理完成也会请求不到，一定要注意
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3+Element-plus项目自动导入报错的解决方案
vue3出来一段时间了,element也更新了版本去兼容vue3,下面这篇文章主要给大家介绍了关于Vue3+Element-plus项目自动导入报错的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
vue单向以及双向数据绑定方式(v-bind和v-model的使用)
这篇文章主要介绍了vue单向以及双向数据绑定方式(v-bind和v-model的使用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法
这篇文章主要介绍了uniapp组件uni-file-picker中设置使用照相机和相册的权限,在uniapp中，我们通常会使用uni-file-picker这个组件，但是这个组件中，有点缺陷，就是没有对这个功能的传值设置，这里就要给组件进行修改了，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue实现微信支付功能遇到的坑,本文是小编记录整理下拉的，以便日后所需，需要的朋友可以参考下2019-06-06
在我们的印象使用中，vue除了写业务代码没有特别新奇的功能了，今天就来看看如何自动化生成vue组件文档2021-06-06
这篇文章主要介绍vue3中 provide 和 inject 用法及原理，provide 和 inject可以 解决多次组件传递数据的问题，下面文章是具体的用法和实现原理,具有一定的参考价值，需要的朋友可以参考一下，希望对大家有所帮助2021-11-11
这篇文章主要介绍了解决vue-cli3 使用子目录部署问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Vue手写实现异步更新详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-08-08
这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了VUEJS实战之修复错误并且美化时间，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
最新评论