1,首先 axios请求,看后端接口路径,http://122.226.146.110:25002/api/xx/ResxxList,所以baseURL地址改成 ‘/api’
let setAxios = originAxios.create({baseURL: '/api', //这里要改掉timeout: 20000 // request timeout});
export default setAxios;
2,然后ue.config.js在文件中
module.exports = {devServer: {open: true,host: 'localhost',//localhostport: 2500,https: false,disableHostCheck: true,//以上的ip和端口是我们本机的;下面为需要跨域的proxy: {//配置跨域'/api': {target: 'http://122.xxx.xxx.110:25002/',//这里后台的地址模拟的;应该填写你们真实的后台接口ws: true,changOrigin: true,//允许跨域pathRewrite: {'^/api': '/api'//请求的时候使用这个api就可以}}}},}
需要重新关闭开启项目
配置线上环境和开发环境同时使用
1.生产环境(production)和开发环境(development)配置
1).在根目录下建文件.env.production
NODE_ENV='production'
VUE_APP_MODE='production'
VUE_APP_API_URL='http://xxxxx' //上线nginx所在地址(处理跨域问题)
到时上线了,前端项目是以静态资源的形式放在nginx下,有nginx代理转发请求;因此前端写的请求地址写成nginx所在的地址,前端静态资源地址(nginx所在的地址)–>请求地址写nginx所在地址===看起来是同一个地址,因此不会存在跨域
注:请求地址虽然写的是nginx所在地址,但nginx会做转发代理到真实后端接口
2)在根目录下建文.env.development
NODE_ENV='development'
VUE_APP_MODE='development'
VUE_APP_API_URL='http://localhost:8081'
此段参考 :https://blog.csdn.net/zhouzhou69/article/details/127482369
let URL = null
//配置Url 判断当前环境是生产环境还是开发环境
if (process.env.NODE_ENV !== ‘development’) {
//如果不为开发环境,则使用以下链接
URL = ‘xxxxxxxxx’
} else {
URL = ‘/api’
//使用proxy跨域指定的替代
}
const service = axios.create({
baseURL: URL,
responseType: ‘json’,
withCredentials: true,
CrossDomain: true
})
此段参考:https://blog.csdn.net/qq_20497071/article/details/109483669