解决Vue请求接口出现跨域问题。Access-Control-Allow-Origin
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
解决Vue请求接口出现跨域问题
在使用axios
请求了接口后,发现并没有请求到,F12里面出现如下图所示的报错
这是提示跨域了。所有使用JavaScript的浏览器都会支持同源策略。同源策略即指域名/协议/端口号相同。只要有一个不同,就会当作跨域请求。
解决方法为:
- 一种是让后端接口里添加如下两句代码:
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
-
当然求人不如求己,自己在项目里面设置代理
- 如果使用vue-cli脚手架创建的项目,找到
config
文件夹下的index.js
文件。 - 找到
dev
下的proxyTable {}
- 如果使用vue-cli脚手架创建的项目,找到
举个例子,如果请求接口为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
的配置文件请参考官方文档
以上就设置完成了,当然最后一步千万不要忘了:
关掉页面,从新npm run dev一下,要不即使设置代理完成也会请求不到,一定要注意
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)