线上环境不跨域情况(即前端和后端布置在同一个端口下)
1、vue.config.js 文件中注释掉devserver中的proxy和after
2、request.js文件 将baseurl改一下(request文件拦截了所有请求,然后重新请求,这里是否改看个人情况,默认是'/prod')
3、main.js中注释掉mock服务
线上环境跨域
跨域我们是要设置代理的,在vue.config.js中这样配置
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://localhost:8080', // 接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
pathRewrite: {
'^/api': '' // 本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉
}
}
},
//before: require('./mock/mock-server.js')
}
其中proxy中的‘/api’是你在.env.development或者.env.production中设置的,这样会拦截能够识别到该字符串的请求转发到代理的网址。