前后端分離，如何解決跨域問題

跨域
1、Jsonp,只能使用get提交，傳輸數據量有限
2、CORS(Corss-origin resource sharing)跨域資源共享，支持post提交
?? ?CORS原理，只需要在響應頭header中注入Access-Control-Allow-Origin，這樣瀏覽器堅持到，就可以跨域

一、CORS跨域需要瀏覽器與服務端同時支持，目前所有瀏覽器都支持，IE不能低于IE10

整個CORS通信，瀏覽器自動完成，對于開發者來說，CORS通信和AJAX通信沒有區別，瀏覽器一旦發現AJAX請求跨域，
?? ?會自動添加一些附加的頭信息

因此，實現CORS的關鍵是服務器，只要服務器實現CORS接口，就可以跨域通信
?

二、兩種請求
瀏覽器將CORS請求分為兩類，簡單請求，非簡單請求

只要同時滿足以下兩大條件，就屬于簡單請求。

（1) 請求方法是以下三種方法之一：
?? ?HEAD
?? ?GET
?? ?POST
（2）HTTP的頭信息不超出以下幾種字段：
?? ?Accept
?? ?Accept-Language
?? ?Content-Language
?? ?Last-Event-ID
?? ?Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同時滿足上面兩個條件，就屬于非簡單請求。
瀏覽器對這兩種請求的處理，是不一樣的。

1、簡單請求
瀏覽器會自動在頭信息中添加一個Origin字段
origin字段用來說明，本次請求來至哪個服務器（協議+域名+端口）

如果指定的源，不在許可范圍之內，會返回一個正常的http回應，瀏覽器發現這個響應頭信息中不包含
?? ?Access-Control-Allow-Origin字段，就會拋出異常被onerror回調函數捕獲，無法通過狀態碼判斷，因為可能是200

如果指定的域名在許可的范圍內，服務返回的響應的頭信息就會多幾個字段
?? ?Access-Control-Allow-Origin: http://api.bob.com
?? ?Access-Control-Allow-Credentials: true
?? ?Access-Control-Expose-Headers:?FooBar
?? ?Content-Type: text/html; charset=utf-8?? ?

?? ?Access-Control-Allow-Origin:
?? ??? ?該字段必須，它的值要么是請求時Origin自動的值，要么是*，代表接收所有域名的請求
?? ??? ?
?? ?Access-Control-Allow-Credentials：
?? ??? ?可選，boolean值，代表是否允許發送cookie，這個值只能為true,不發送就刪除該字段
?? ??? ?在AJAX請求中打開withCredentials屬性，否則瀏覽器可能不會發送，如果要發送，請求域名就不能為*
?? ??? ?
?? ?Access-Control-Expose-Headers：
?? ??? ?XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：
?? ??? ?Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
?? ??? ?如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。
?? ??? ?上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

2、非簡單請求
非簡單請求：是那種對服務器有特殊要求的請求，比如請求方法是PUT或DELETE，
?? ?或者Content-Type字段的類型是application/json。
非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。
瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。
只有得到肯定答復，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。?? ?

預檢請求
"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息里面，關鍵字段是Origin，
?? ?表示請求來自哪個源。
?? ?
除了Origin字段，"預檢"請求的頭信息包括兩個特殊字段。
（1）Access-Control-Request-Method
該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，上例是PUT。
（2）Access-Control-Request-Headers
該字段是一個逗號分隔的字符串，指定瀏覽器CORS請求會額外發送的頭信息字段，上例是X-Custom-Header。

如果瀏覽器否定了"預檢"請求，會返回一個正常的HTTP回應，但是沒有任何CORS相關的頭信息字段。
?? ?這時，瀏覽器就會認定，服務器不同意預檢請求，因此觸發一個錯誤，被XMLHttpRequest對象的onerror回調函數捕獲。控制臺會打印出如下的報錯信息。

?? ?XMLHttpRequest cannot load http://api.alice.com.
?? ?Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

三、spring 只需添加CorssOrgine注解實現跨域
? ? ??corssOrgine注解，默認允許所有的域請求

總結

以上是生活随笔為你收集整理的前后端分离，如何解决跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。