跨域
作為一個前端開發者來說不可避免的問題就是跨域，那什么是跨域呢？
跨域：指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。瀏覽器的同源策略是指協議，域名，端口都要相同，其中有一個不同都會產生跨域
那如何解決跨域問題呢。跟后端商量一下也是可以通過CORS解決跨域問題的。但是一生要強的前端崽兒也是可以自己解決的。
webpack-dev-server反向代理
webpack-dev-server幫我們解決了這個痛點，它基于Node代理中間件http-proxy-middleware實現。
配置：
proxy:?{'/api':?{target:?'https://xxx.com',?//?反向代理的目標服務changeOrigin:?true,??//?開啟后會虛擬一個請求頭OrigincookieDomainRewrite:?{'.xxx.com':?'localhost',},??//?修改響應頭中?cookie?中的域名}
}什么是反向代理
簡單的說就是A需要向C發送請求，但是C不認識A自然是不愿意的，但是A認識B，A向B發送請求，可是B也不會返回什么東西但是他認識可以返回請求C，那么B再次向C發送請求，C看在B的面子上給B返回請求了，B再給A返回請求。。。。
具體到開發中就是，前端需要向https://xxx.com這個域名調用接口，但是前端開發環境啟動項目是https://localhost:8080服務,直接調用接口會跨域。
所以前端需要做一層代理。從https://localhost:8080直接請求到https://xxx.com域名的接口，這對于前端來說應該是無感知的。
反向代理隱藏了真實的服務端；
切換環境debug
問題來了，如果我們正在開發新需求，但是此時有線上bug，那我們怎么辦吶？
首先切換分支
修改target的域名
重新啟動
每次到了第二步的時候我還得問問可以在哪個環境復現，這套流程下來雖然也不復雜但是如果可以省略是不是想想就更開心了。
抽離代理層
如果可以，前端不再需要把前端編譯過程和服務代理目標捆綁在一起。不妨使用Nginx試試呢。
安裝Nginx
固定前端代理
proxy:?{'/api':?{target:?'127.0.0.1:8080',?//?固定IPchangeOrigin:?true,??//?開啟后會虛擬一個請求頭OrigincookieDomainRewrite:?{'.xxx.com':?'localhost',},??//?修改響應頭中?cookie?中的域名}
}Nginx代理
server?{listen???????8080;???//?這里是我們想要默認訪問的端口server_name??127.0.0.1;???//??這里是想在瀏覽器里訪問的地址#charset?koi8-r;#access_log??logs/host.access.log??main;location?/?{proxy_pass?http://xxx.com;??//??這里是你在本地啟動的時候的鏈接，例如localhost:4043，換個端口號就行了autoindex?on;}
}有了以上的配置，我們就可以將前端代理層和Nginx代理層解耦，前端固定通過本地127.0.0.1:8080訪問后端接口，而具體接口是代理到開發環境、測試環境或是生產環境，由Nginx決定，只需要修改nginx.conf后重啟即可。而Nginx熱重啟是非常快的，一條命令即可實現，幾乎零等待時間。
//?windows下是這個命令
nginx.exe?-s?reload
//?linux是這樣的
nginx?-s?reload固定端口
如果端口被占用怎么辦呢？
最簡單的辦法是換個端口，但是換端口修改Nginx配置文件比修改代理更復雜些，所以只能另辟蹊徑。那有沒有什么方法可以再次轉一下ip或者端口呢。答案是修改hosts文件
127.0.0.1?www.jia.com當用戶訪問
www.jia.com時給解析到127.0.0.1這個IP。所以修改Nginx配置監聽127.0.0.1的80端口
server?{listen???????80;???//?這里是我們想要默認訪問的端口server_name??127.0.0.1;???//??這里是想在瀏覽器里訪問的地址#charset?koi8-r;#access_log??logs/host.access.log??main;location?/?{proxy_pass?http://xxx.com;??//??這里是你在本地啟動的時候的鏈接，例如localhost:4043，換個端口號就行了autoindex?on;}
}然后修改本地代理配置
proxy:?{'/api':?{target:?'www.jia.com',?//?固定IPchangeOrigin:?true,??//?開啟后會虛擬一個請求頭OrigincookieDomainRewrite:?{'.xxx.com':?'localhost',},??//?修改響應頭中?cookie?中的域名}
}這樣前端去訪問接口域名https://xxx.com會被代理到https://www.jia.com，而https://www.jia.com被本地hosts解析到127.0.0.1，然后Nginx監聽了127.0.0.1的80端口，請求轉發到真實的后端服務！
-?END?-
關于奇舞團
奇舞團是 360 集團最大的大前端團隊，代表集團參與 W3C 和 ECMA 會員（TC39）工作。奇舞團非常重視人才培養，有工程師、講師、翻譯官、業務接口人、團隊 Leader 等多種發展方向供員工選擇，并輔以提供相應的技術力、專業力、通用力、領導力等培訓課程。奇舞團以開放和求賢的心態歡迎各種優秀人才關注和加入奇舞團。
