Vue的axios封装问题

Question

求解，这个应该怎么配置，网上咋写的都有，还有跨域问题，后台给的接口都会跨域吗，必须在 proxyTable: {}里面配置吗

Answer 1

跨域一般是后台处理

Answer 2

一般都是为了一些基本项目配置

1. 异常处理，比如说500、404这些，只有200才进行后续的操作，有的还会对错误码进行判断。
2. content-type
3. timeout

一般来说给你的接口都不会跨域，proxyTable 是让你在本地开发的时候用的。

Answer 3

axios拦截器封装接口调用
可以参考一下我这个，封装axios为了统一的错误处理，配置请求头（token、content-type等），通过请求拦截器/响应拦截器实现相应的逻辑。
后端给到我们接口，我们本地开发肯定是需要配置代理的，不然无法跨域访问接口。上线部署时，配置nginx代理，通过访问nginx服务器代理指向后端的服务器。

Answer 4

后端在配置文件中配置跨域，在开发过程中vue中可以使用porxy来暂时处理跨域问题.
vuecli proxy 配置

Answer 5

axios 封装是为了对请求和响应做统一处理。
封装成什么样看自己的需求。

porxy是本地联调后端线上的api用的。在本地开发会产生跨域，所以需要配置。
线上环境跨域属于nginx配置范围。

如果有使用node中间件，可以在node中解决跨域。

Answer 6

后端给的接口会不会跨域，这个要看后端有没有开cors（安全性），需要proxyTable配置代理
不做代理也可以，还可以在封装axios的时候判断环境做相对应的操作

// 配置接口地址（路径处理函数）考虑跨域情况下

let filterUrl = url =>{
    let baseUrl;
    if(process.env.NODE_ENV === "development"){
        baseUrl = "本地api";
    }else{
        baseUrl = "生产api"
    }
    if (url && url.startsWith("http")) {
    return url;
  }
  return baseUrl + url;
}

Answer 7

配置代理在vue.config.js中找到devServer>proxy
`devServer: {
// development server port 8000
port: 8000,
// If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
proxy: {

'/admin': {
  target: 'http://xxx.xxxx.cn/admin/',
  changeOrigin: true,
  pathRewrite: {
    '^/admin': ''
  }
},

'/api': {

  target: 'http://xxxx.xxxx.cn/api/',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}

}
},`