axios请求跨域前端解决_前端开发-跨域问题（已解决）

开发环境

dev 开发模式下可以下使用webpack 的 proxy。

以vue-elemet-admin为例。

在目录configindex.js里，添加代码：

proxyTable: {
 '/apis': {
 target: 'https://api.domain.com', // 接口的域名
 secure: false,  // 如果是https接口，需要配置这个参数
 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
 pathRewrite: {"^/apis" : ""}
      }

如图：

代码

在configdev.env.js设置BASE_API即接口前缀

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 BASE_API: '"http://192.168.0.189:9528/apis"',
})

前端请求代码：

export function get_ys_list(query) {
 return request({
 url: '/user/userlist',
 method: 'post',
 data: query
  })
}

浏览器访问的地址为：http://192.168.0.189:9528/apis/user/userlist

webpack会对接口进行拦截代理，把接口指向真实的服务端地址，并返回相应数据：

https://your.domain.com/user/userlist

在目录configindex.js中

pathRewrite:{"^/apis":""}

的作用就是将浏览器访问的url进行重写，使之指向正确的服务端地址。

因为是浏览器访问的是和前端代码同一地址、同一端口的地址所有就不会出现跨域问题。

生产环境

当需要部署到服务器上时，build之后是产生的静态文件，所有不能通过webpack代理，可以使用nginx进行反向代理，同样的原理，以实现服务端的跨域请求。

在文件：configprod.env.js

通过设置

module.exports = {
 NODE_ENV: '"production"',
 BASE_API: '"http://online.domain.com/api"', //线上环境的ip或者域名
}

run build产生dist静态文件，上传服务器。

登陆服务器，打开路径为：/usr/local/nginx/conf/nginx.conf

添加

 location /api {
            rewrite ^/api/(.*) /$1 break;
            # API Server
            proxy_pass https://api.domain.com;
        }

原理同webpack代理。进而避免跨域问题。

这个方案的优点在于不需要后端的操作。只需要前端和服务器上进行代理就行。

简单。