新手學跨域之代理/轉發
●XMLHttpRequest (modern browser)
以前寫的這個系列的時候，是看了一些資料之後通過實操，從一個前端初學者的角度記錄驗證過程。
但是，在近年來的工作中發現用到的場景並不多，實際工作中大部分遇到的跨域問題還是在呼叫介面時。
雖然有了CORS 方案，但是CORS 實際開發中並不友好。首先它不支援低版本瀏覽器，當然現在前端開發基本可以忽略了，更主要的是CORS 是需要伺服器配置的，而這個一般是後臺同事負責。第一次介面請求報錯了，提醒他們要加上允許請求的域，後來介面新增了新的請求方法或請求頭欄位，又要提醒他們，遇到有經驗又有耐心的後臺開發小哥哥還好，不然就等著吧。
我們回到本質，為什麼會有跨域問題，原因是瀏覽器的同源策略。所以如果呼叫的介面與頁面同域或呼叫介面的不是瀏覽器就沒有跨域問題了。現在把兩者結合起來就可以實現跨域請求，即前端把請求傳送給頁面伺服器，頁面伺服器請求介面伺服器，拿到資料後再返回給前端，這裡頁面靜態伺服器充當了代理/轉發的角色。
現在我們具體看看怎麼實現代理/轉發，假設要請求的介面為https://api.yyy.com/data.php
http-server
現在前端開發一般會在本地使用Node開啟靜態伺服器，可以用http-server
這個包建立一個簡單的靜態伺服器，加上選項-P
或--proxy
即可實現介面代理/轉發
http-server -P https://api.yyy.com
現在為當前目錄開啟了一個靜態伺服器，前端直接請求即可拿到介面資料
fetch('data.php').then(console.log)
請求當前data.php
相當於請求https://api.yyy.com/data.php
，並且沒有跨域問題。
http-server
優點是簡單快捷，缺點是不夠靈活，且不能自動監聽程式碼改動並重新整理頁面。
BrowserSync
可能是更好的選擇。webpack-dev-server
文件：https://webpack.js.org/config...
http-server
適合本地寫些簡單頁面、小demo，而我們開發複雜些的專案，比如基於Vue.js
、React
等來構建專案一般會用到webpack
，並且在開發階段使用webpack-dev-server
，這裡只介紹它的代理部分，它的代理實現是基於http-proxy-middleware
封裝。
在webpack.config.js
裡配置
devServer: {
// ...
proxy: {
'/api': {// 如果是匹配所有介面請求可以用'**'
target: 'https://api.vczhan.com',
changeOrigin: true,
pathRewrite: {'^/api' : ''} // 本地請求中加上了api以區別不同介面請求，但真正的介面是沒有的，所以這裡對它重寫
}
}
}
前端請求
fetch('api/data.php').then(console.log)
這裡請求api/data.php
會轉發到https://api.yyy.com/data.php
。
nginx
前端程式碼打包後傳到伺服器上，需要一個web伺服器，這樣才能訪問頁面，這裡選擇nginx
，它既輕便又強大，可配置的規則很多，這裡只展示最簡單的代理配置
server {
listen80;
server_name xxx.com
location /api/ {
proxy_pass https://api.yyy.com/; # 轉發到api.yyy.com
#proxy_pass https://api.yyy.com;# 轉發到api.yyy.com/api/
}
}
同樣的請求http://xxx.com/api/data.php
會轉發到https://api.yyy.com/data.php
。
雖然也涉及了伺服器配置，但基本只要配置一次就行了，一般web頁面的伺服器，會給前端同學許可權吧。