跨域問題與解決方法

同源策略

瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。
同源策略限制以下幾種行為：
Cookie、LocalStorage 和 IndexDB 無法讀取
DOM和JS對象無法獲得
AJAX 請求不能發送

解決方法

JSONP跨域

jsonp的原理就是利用

$.ajax({url: 'http://www.domain2.com:8080/login',type: 'get',dataType: 'jsonp',  // 請求方式為jsonpjsonpCallback: "handleCallback",  // 自定義回調函數名data: {}
});

Vue axios實現，后端node.js

jsonp的缺點：只能發送get一種請求。

跨域資源共享（CORS）

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
CORS需要瀏覽器和服務器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
??瀏覽器將CORS跨域請求分為簡單請求和非簡單請求。
??只要同時滿足一下兩個條件，就屬于簡單請求
(1)使用下列方法之一：
head
get
post
(2)請求的Heder是
Accept
Accept-Language
Content-Language
Content-Type: 只限于三個值：application/x-www-form-urlencoded、multipart/form-data、text/plain
不同時滿足上面的兩個條件，就屬于非簡單請求。瀏覽器對這兩種的處理，是不一樣的。

對于簡單請求，瀏覽器直接發出CORS請求。具體來說，就是在頭信息之中，增加一個Origin字段。
CORS請求設置的響應頭字段，都以 Access-Control-開頭:
1）Access-Control-Allow-Origin：必選
??它的值要么是請求時Origin字段的值，要么是一個*，表示接受任意域名的請求。
2）Access-Control-Allow-Credentials：可選
??它的值是一個布爾值，表示是否允許發送Cookie。默認情況下，Cookie不包括在CORS請求之中。設為true，即表示服務器明確許可，Cookie可以包含在請求中，一起發給服務器。這個值也只能設為true，如果服務器不要瀏覽器發送Cookie，刪除該字段即可。
3）Access-Control-Expose-Headers：可選
??CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader(‘FooBar’)可以返回FooBar字段的值。

nginx代理跨域

nginx代理跨域，實質和CORS跨域原理一樣，通過配置文件設置請求響應頭Access-Control-Allow-Origin…等字段。
1）nginx配置解決iconfont跨域
??瀏覽器跨域訪問js、css、img等常規靜態資源被同源策略許可，但iconfont字體文件(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜態資源服務器中加入以下配置。

location / {add_header Access-Control-Allow-Origin *;
}

2）nginx反向代理接口跨域
跨域問題：同源策略僅是針對瀏覽器的安全策略。服務器端調用HTTP接口只是使用HTTP協議，不需要同源策略，也就不存在跨域問題。
實現思路：通過Nginx配置一個代理服務器域名與domain1相同，端口不同）做跳板機，反向代理訪問domain2接口，并且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域訪問。
nginx具體配置：

#proxy服務器
server {listen       81;server_name  www.domain1.com;location / {proxy_pass   http://www.domain2.com:8080;  #反向代理proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名index  index.html index.htm;# 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用add_header Access-Control-Allow-Origin http://www.domain1.com;  #當前端只跨域不帶cookie時，可為*add_header Access-Control-Allow-Credentials true;}
}

nodejs中間件代理跨域

node中間件實現跨域代理，原理大致與nginx相同，都是通過啟一個代理服務器，實現數據的轉發，也可以通過設置cookieDomainRewrite參數修改響應頭中cookie中域名，實現當前域的cookie寫入，方便接口登錄認證。

轉自：
https://juejin.cn/post/6844903882083024910