vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue请求接口出现跨域问题

如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin

作者:ShiyuTim

这篇文章主要介绍了如何解决Vue请求接口出现跨域问题Access-Control-Allow-Origin,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue请求接口出现跨域问题

在使用axios请求了接口后,发现并没有请求到,F12里面出现如下图所示的报错

这是提示跨域了。

所有使用JavaScript的浏览器都会支持同源策略。

同源策略即指域名/协议/端口号相同。

只要有一个不同,就会当作跨域请求。

解决方法

一种是让后端接口里添加如下两句代码:

header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

当然求人不如求己,自己在项目里面设置代理

举个例子:

如果请求接口为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一下,要不即使设置代理完成也会请求不到,一定要注意

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文