前言

在使用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文件，如下形式