vue項目打包後怎樣優雅的解決跨域

前言

在使用vue.js開發前端項目時，再結合webpack搞起各類依賴、各類插件進行開發，無疑給前端開發帶來了不少便捷，就在解決跨域這個問題上，相信衆多用vue.js的前端同僚們同我同樣嚐到了甜頭，開發環境全靠proxyTable一通配置簡直不要太酸爽。還不明因此然的新手們可能還沒搞清我說的是什麼，就是下面這幾行配置:

proxyTable: {
      '/api': {
        target: 'http://113.113.113.113:5000', //假的接口地址哈
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },

咱們的跨域居然就這樣完美的解決了，而後就開始愉快的請求後端的接口啦！！

回到正題

具體場景：公司的一個h5項目是部署在客戶端的，可是部署後出現bug了，因爲多人協同開發且趕進度居然是打包後由於CSS的問題多個頁面佈局亂了，可是開發環境並無問題啊，怎麼打完包樣式就亂了？那就打開dist下的index.html看看唄，復現一下bug，想都不用想，頁面沒數據怎麼復現，再去造一套假數據？做爲一個不喜歡這樣折騰的人必然是不想作這種事情的。

就不勞煩後端了，咱本身解決！

nginx仍是要會一些些的，本身配置一下，分分鐘解決，哈哈！

server {
        listen       8082;
        server_name  127.0.0.1;  //咱本身nginx服務器地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
    location /app-api {
            rewrite  ^.+app-api/?(.*)$ /$1 break;
            include  uwsgi_params;
            proxy_pass   http://113.113.113.113:5001/;  //後端接口地址
            //關鍵部分start
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
            //關鍵部分end
            //如下配置參見nginx配置文檔哈
            #Proxy Settings
            proxy_redirect     off;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header   Connection       close;
            proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
            proxy_max_temp_file_size 0;
            proxy_connect_timeout      90;
            proxy_send_timeout         90;
            proxy_read_timeout         90;
            proxy_buffer_size          4k;
            proxy_buffers              4 32k;
            proxy_busy_buffers_size    64k;
            proxy_temp_file_write_size 64k;
       }
}

目的是把後端接口用nginx再代理一遍，咱本身用nginx間接容許一下跨域請求！

start nginx //在nginx目錄啓動服務

一般咱們會作一個統一的管理接口的js文件，以下形式

var BASE_URL = '/api';
var isPro = process.env.NODE_ENV === 'production'
if(isPro){
  BASE_URL= 'http://113.113.113.113:5000',  //線上或者測試地址
  //BASE_URL= 'http://127.0.0.1:8020',  //nginx代理地址
  //當咱們須要打包後依然能正常調接口的時候用這個    
}
const UrlConfig = {
  getToken:BASE_URL + "某接口"
}
export default {
  UrlConfig
};

至此，就把打包後接口跨域的問題優雅的解決啦。

結語

由於公司的先後端項目一般都放在同一臺服務器，或者不在同一臺服務器的時候跨域也是靠後端的同志們去解決的，因此不多在生產環境中靠前端解決跨域的這項需求。不過我分享的這個小技巧也只適用於以上相似場景中，歸根結底仍是要在多人協同開發的過程當中提早規劃好公共以及我的的編程規範，儘可能保證開發環境和生產環境是一致的，就能夠擺脫不少相似的問題。