vue 发布到正式环境跨域配置（及部署后无法通过路由访问问题）

vue在本地跨域通过配置proxy没有问题，但是发布到正式环境后仍然存在跨域问题，只有通过跨域

1、在vue.config.js文件中devServer下的proxy子节点添加正式环境跨域参数，这里在正式环境的跨域为api3s

 

2、配置正式环境参数

在config目录下配置主配置文件index.js，引入不同环境的配置

2.1 配置基于axios的请求跨域

新建axois的基础配置文件https.js，引入上一步config文件夹中的index.js，配置axios的默认url ，这样在正式环境，axios的baseURL就是api3s，然后再main.js中引入http.js文件

2.2 对于不通过axios的一般跨域请求，如基个路径直接请求图片：http://***/map.png，如果该路径是非同源路径，此时需要对请求url做处理。

  2.2.1 首先配置跨域地址表otherProxy.js

2.2.2 在需要对url做跨域处理的地方引用跨域表，调用函数getProxyUrl,对其进行跨域处理，得到处理后的url

  /**
     * 功能：判断是否是proxy，并重新拼接地址
     * 参数：@param {string} url             地址
     * 参数：@param {boolean} isAxiosUrl     是否是axios请求地址
     * @returns
     */
    getProxyUrl(url, isAxiosUrl) {
        var proxys = require("@/common/api/otherProxy.js");
        var urls = proxys.proxyTable;
        var flag = false;
        for (var m in urls) {
            var url1 = urls[m].url;
            if (url1) {
                var index = url.indexOf(url1);
                if (index != -1) {
                    flag = true;
                    axios.defaults.baseURL = m;
                    var foot = url.substr(index + url1.length);
                    if (isAxiosUrl == true) {
                        return foot; //针对axios 请求 url的转换(跨域头部为axios的默认baseURL)
                    } else {
                        return m + foot; //针对url的转换（url要添加baseURL，比如图片地址）
                    }
                }
            }
        }
        if (flag == false) {
            return url;
        }
    }

3、npm run build 构建正式环境发布代码

4、将步骤3构建的ncp3d发布到服务器的tomcat环境中，并添加web-info文件夹，添加web.xml(必须添加,不然无法通过路由访问应用)

web.xml

  /
  
    404
    /index.html
  

5、配置nginx代理

  5.1 首先安装nginx

  5.2 修改nginx目录文件夹conf中的配置文件nginx.conf(跨域实际实现的地方，上面的跨域url就是访问的这里配置了跨域后的url)，如 这里的api3s就是跨域后url，但实际上这里访问的是api3s的实际地址)

   这里是代表nginx和tomcat在同一个服务器

修改配置文件夹的时候，要带上项目名

5.3 附件中打开cmd，然后切换到nginx所在的路径，输入  start nginx 启动nginx 即可完成跨域配置

http://nginx服务器地址：3000/ncp3d  即可实现访问项目