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

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
         id="scplatform" version="2.5">
  <display-name>/</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

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  即可實現訪問項目