前言
在使用vue.js開發前端項目時，再結合webpack搞起各種依賴、各種插件進行開發，無疑給前端開發帶來了很多便捷，就在解決跨域這個問題上，相信眾多用vue.js的前端同僚們同我一樣嘗到了甜頭，開發環境全靠proxyTable一通配置簡直不要太酸爽。還不明所以然的新手們可能還沒搞清我說的是什么，就是下面這幾行配置:
proxyTable: {
'/api': { target: 'http://113.113.113.113:5000', //假的接口地址哈 changeOrigin: true, pathRewrite: { '^/api': '' } },我們的跨域竟然就這樣完美的解決了，然后就開始愉快的請求后端的接口啦！！
資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
回到正題
具體場景：公司的一個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 }; 至此，就把打包后接口跨域的問題優雅的解決啦。
結語
因為公司的前后端項目通常都放在同一台服務器，或者不在同一台服務器的時候跨域也是靠后端的同志們去解決的，所以很少在生產環境中靠前端解決跨域的這項需求。不過我分享的這個小技巧也只適用於以上類似場景中，歸根結底還是要在多人協同開發的過程中提前規划好公共以及個人的編程規范，盡量保證開發環境和生產環境是一致的，就可以擺脫很多類似的問題。