VUE生产环境解决跨域两种方式

一、后端配置允许跨域

1.后端配置

首先要后端同事进行配置，一般后端同事应该都会，不会就让他百度，这里以nodejs的express框架为例：

// 配置跨域 Access-Control-Allow-Origin为允许跨域的地址
app.all('*', function(req, res, next) {
  // res.header("Access-Control-Allow-Origin", "http://localhost:63342");
  res.header("Access-Control-Allow-Origin", "http://8.129.103.157");
  res.header("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE,x-requested-with,Authorization");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1')
  //这段仅仅为了方便返回json而已
  res.header("Content-Type", "application/json;charset=utf-8");
  // 如果前端允许传递cookie，加上这一句
  res.header("Access-Control-Allow-Credentials", 
  if(req.method == 'OPTIONS') {
    //让options请求快速返回
    res.sendStatus(200);
  } else {
    next();
  }
});

以上内容必须写在use router之前，建议直接写在 var app = express();下面

2.vue项目配置

（1）axios配置

在自定义axios配置文件下面通过生产环境以及开发环境进行判断设置baseURL，例如：

import axios from "axios";
axios.defaults.baseURL =
  process.env.NODE_ENV === "development" ? "" : "http://8.129.103.157:3000";

其中 http://8.129.103.157:3000为后端服务的地址以及端口号

（2）接口路径配置

一般我们都会在开发时拼接api来配置开发环境下的跨域代理，但是在生产环境上不能出现这种情况，因为后端接口地址没有api。
所以我们应该像配置baseURL一样配置一个全局变量

const base = process.env.NODE_ENV === "development" ? "/api" : "";

使用时：

export function users(data) {
  // 用户查询接口
  return request({
    url: base + "/users",
    method: "get",
    data: data
  });
}

这样就兼容了开发环境以及生产环境

（3）最终结果

部署之后，查看network

查看requestURL是否和后端接口路径一致，若是则配置成功

二、配置Nginx

若后端并未配置允许跨域，可以通过配置nginx代理实现

1.nginx配置

当访问路径出现 /managementapi/ 就会被代理到 http://8.129.103.157:3000/
这样接口api配置就像你配置开发环境proxy跨域一样，原理也基本相同

2.最终效果

查看requestURL并且将 /managementapi/ 之前（包括/managementapi/）替换为你代理的地址
这里是：http://8.129.103.157:3000/
得到最后的接口地址：http://8.129.103.157:3000/users
看其是否与后端接口地址一致，若是则配置成功