Vue-cli中本地跨域请求后端接口详细配置

RT

打开你的vue项目工程目录,如下:

项目目录

选择config下的index.js文件,在proxyTable中添加如下配置:

添加的配置

找到dev下的proxyTable配置,这里详细解释下 proxyTable中的配置.

图中的'/admin'意思是你配置的接口名称,比如请求login/login接口,,则请求的url为'/admin/login/login'如图

接口中的url地址

其中changeOrigin: true // 这个设置就是设置跨域,一定要加.

pathRewrite里是路径重写的意思,如果设置'^/admin':' ',设置为空值时,请求'/admin/login/login/地址时会请求

'你家后端的IP地址/login/login',注意,这时你家后端的ip地址后面没有跟着admin参数,而是直接跟着/login/login/.

如果设置'^/admin':'/admin ',设置为admin时,请求'/admin/login/login/地址时会请求

'你家后端的IP地址//admin/login/login',注意,这时你家后端的ip地址后面会跟着admin参数,

很多人报错,大多都错在这里,要根据自家后端接口进行配置,比如要请求'http://xx.xxx.xx.xx/Tong/index.php/admin/login/login'接口时,当你需要这个admin时

pathRewrite需要配置为:'^/admin': '/admin',

比如要请求'http://xx.xxx.xx.xx/Tong/index.php/login/login'接口时,当你不需要这个admin时,

pathRewrite需要配置为:'^/admin': ' ',设置为空

参考 官方文档地址: http://suo.im/2e2eW1

这个配置走了许多坑,记录共勉

如有错误,欢迎指正