VueCli_Vue2 配置跨域

不重写路径

代理说明:

• 后端服务: http://localhost:3000/upload-api/其他路径
• 本地服务: http://localhost:8080

那么端口不一样，此时存在跨域，我们截取 upload-api 作为代理路径之后

• 本地服务请求地址: http://localhost:8080/upload-api

遇到 upload-api 之后

• 本地服务实际请求地址: http://localhost:3000/upload-api

但是在浏览器中的 network 中是看不到实际请求地址的

vue.config.js

devServer: {
    open: true,
    proxy: {
        '/upload-api': {
            target: 'http://localhost:3000',
        }
    }
}

home.vue

axios({
  baseURL:'upload-api',
  url:'test',
  method:'get',
}).then(res=>{
  console.log(res.data);
});

重写路径

代理说明:

• 后端服务: http://localhost:3000/其他路径
• 本地服务: http://localhost:8080

那么端口不一样，此时存在跨域，我们截取 upload-api 作为代理路径之后

• 本地服务请求地址: http://localhost:8080/upload-api

遇到 upload-api 之后，代理且重写

• 本地服务实际请求地址: http://localhost:3000/

但是在浏览器中的 network 中是看不到实际请求地址的

vue.config.js

devServer: {
    open: true,
    proxy: {
        '/upload-api': {
            target: 'http://localhost:3000',
            pathRewrite: {
                '/upload-api':'/'
            }
        }
    }
}

home.vue

axios({
  baseURL:'upload-api',
  url:'test',
  method:'get',
}).then(res=>{
  console.log(res.data);
});