前端跨域解决方案
什么是跨域？
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源。
同源策略：
同源是指“協議+域名+端口”三者相同。
跨域解決方案：
1.通過jsonp跨域；
2.document.domain+iframe跨域；
3.location.hash+iframe跨域；
4.window.name+iframe跨域；
5.postMessage跨域；
6.跨域資源共享（CORS）；
7.nginx代理跨域；
8.nodejs中間件代理跨域；
9.WebSocket協議跨域；
（1）通過jsonp跨域
我們知道在<html>中通過<script>標簽請求其他域時不會存在跨域問題，那么基于此原理我們可以動態創建script，再請求一個帶參網址實現跨域通信。
1.可以原生實現；
2.jquery ajax實現：指定dataType: ‘jsonp’
缺點：只能實現get一種請求。
（2）document.domain+iframe跨域
此方案僅限主域相同，子域不同的跨域場景。
實現原理：兩個頁面都通過js強制設置document.domain為基礎主域，就實現了同域。
（3）location.hash+iframe跨域
實現原理：a域與b域相互通信，通過中間頁c來實現。三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。
（4）window.name+iframe跨域
（5）postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數不多可以跨域操作的window屬性之一。
（6）跨域資源共享（CORS）
普通跨域請求：只服務端設置Access-Control-Allow-Origin即可，前端無需設置，若要帶cookie請求，前后端都需要設置。
目前，所有瀏覽器都支持該功能，CORS也已經成為主流的跨域解決方案。
1.前端設置：
原生ajax、jQuery ajax、vue框架
xhr.withCredentials = true; ? //前端設置是否帶cookie
2.服務端設置：
java后臺、nodejs后臺
Response.setHeader(“Access-Control-Allow-Origin”,”http://www.jinjumao.club”);
response.setHeader(“Access-Control-Allow-Credentials“，”true”);
（7）nginx代理跨域
1.nginx配置解決iconfont跨域
location / {
add_header Access-Control-Allow-Origin *;
}
2.nginx反向代理接口跨域
實現思路：通過nginx配置一個代理服務器（域名與domain1相同）做跳板機，反向代理訪問domain2接口，并且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域登錄。
（8）Nodejs中間件代理跨域
node中間件實現跨域代理，原理大致與nginx相同，都是啟用一個代理服務器，實現數據的轉發，也可以通過設置cookieDomainRewrite參數修改響應頭中cookie中域名，實現當前域的cookie寫入，方便接口登錄認證。
1.非vue框架的跨域
利用node+express+http-proxy-middleware搭建一個proxy服務器。
2.vue框架的跨域
利用node+webpack+webpack-dev-server代理接口跨域。在開發環境下，由于vue渲染服務和接口代理服務都是webpack-dev-server同一個，所以頁面與代理接口之間不再跨域，無須設置headers跨域信息了。
（9）WebSocket協議跨域
WebSocket protocol是HTML5一種新的協議，它實現了瀏覽器與服務器全雙工通信，同時允許跨域通訊。
總結
- 上一篇： toolStrip 按钮图片大小的修改
- 下一篇： 2017年html5行业报告,云适配发布