【VUE + SPA】接口跨域, 攜帶cookie 的解決方案

背景

因爲歷史緣由，一個站點須要作成徹底的SPA應用是很是困難的, 但咱們能夠在一些比較獨立的業務中使用SPA, 每一個SPA應用相互獨立. 這樣在用webpack打包的時候實際上是會加快效率，同時不一樣的業務的依賴也能夠不同, 方便之後維護.

思考

當我在使用 vue + webpack 開發單頁面的時候，主機host是 localhost, 端口是 8080(可自行更改). 但個人本地開發站點 在其它的linux 主機上, 並且使用 nginx 進行了代理.
站點裏面已經存在了其它業務， 若是我在本身機器上開發，那麼如何去調用訪問這個站點的接口呢?

代理轉發

若是你使用的是 vue-cli 進行初始化項目， 好比：

vue init webpack new-project

那麼在config/index.js 下能夠修改 dev.proxyTable

proxyTable: {
  '/api': {
    target: 'http://api.example.com',
    changeOrigin: true,
    onProxyReq (proxyReq, req, res) {
    }
  }
}

實際上這是由於腳手架使用了中間件 http-proxy-middleware

源地址	轉發地址
localhost:8080/api	api.example.com/api
localhost:8080/api/notifications	api.example.com/api/notifications

若是咱們要去掉 api.example.com的api路徑？

設置 pathRewrite

proxyTable: {
  '/api': {
    target: 'http://api.example.com',
    changeOrigin: true,
    pathRewrite: '^/api' : '',
    onProxyReq (proxyReq, req, res) {
    }
  }
}

源地址	轉發地址
localhost:8080/api	api.example.com
localhost:8080/api/notifications	api.example.com/notifications

代理的好處:

1. 解決開發時跨域問題

代理的問題：

1. 代碼須要設置環境變量，prod環境下不存在 http-proxy-middleware 中間件

攜帶Cookie

若是我想擁有 www.example.com 或 *.example.com 下的 cookie 進行模擬請求.

本地host	線下域名
localhost:8080	www.example.com

能夠利用 nginx + host 進行轉發配置
本地配置 host

127.0.0.1 www.example.com

配置 linux 機器的 nginx.conf

http: {
    server： {
        listen 80;  
        server_name www.example.com;
        location / {
        }
        location /project_name { # 指定發佈時的路徑, 如 /profile
           proxy_pass http://xxx.xxx.xxx.xxx:8080; # 你的主機IP
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

只要你訪問 www.example.com/profile 就能訪問到 你正在開發的SPA 應用了

雖然這樣可以解決問題，不過這樣就會帶來 nginx 的配置, 然而這在上線的時候又不是必備的.

雖然我用過 fiddler4, 但我發現了一個更簡單的配置工具，叫作 whistle. 具體使用能夠在github官網去搜索學習.

whistle 是由nodejs開發的工具，他能作的東西有不少，能夠查看報文，注入代碼。自帶了weinre 調試工具, 再配合whistle 的 chrome 插件. 就能夠很快的進行配置host, 以及基本的代理了.

安裝 whistle

npm install -g whistle
whistle.cmd

他會啓動一個端口，訪問站點。而後配置 rules

咱們就能夠經過訪問 www.example.com/profile 進行訪問咱們的單頁面應用了, 這樣請求就能攜帶咱們www.example.com 下面的cookie了

小結

以上是我的的開發經驗， 若是你有更好的解決方案。歡迎提出來一塊兒討論一下!!

相關項目及地址

• vue

• webpack

• vue-cli

• vuejs-templates/webpack

• whistle