天天看點
傳回

java springmvc 前端 跨域問題什麼是跨域問題模拟跨域問題怎麼解決跨域問題JSONPCORSWebSocket

有個朋友在寫扇貝插件的時候遇到了跨域問題。

于是我對解決跨域問題的方式進行了一番探讨。

問題

API：查詢單詞

URL： https://api.shanbay.com/bdc/search/?word={word}

請求方式: GET

參數： {word}, 必須，要查詢的單詞

報錯為

這就是典型的跨域問題。

但是我在浏覽器裡輸入URL是可以進行查詢單詞的操作的，有什麼不同，即下面兩個問題

  1. 為什麼在浏覽器位址欄輸入URL不會出現跨域問題。
  2. 不在伺服器運作的html是否可以完成一次http請求

經過Google和自己測試

  1. 跨域限制是浏覽器行為，不是伺服器行為。 浏覽器認為位址欄輸入時安全的,是以不限制認為是跨域。
  2. 可以，隻要伺服器配置為所有域都可以進行請求,那麼不在伺服器運作的HTML就可以完成http請求。

什麼是跨域問題

同源政策：

同源指的是域名（或IP），協定，端口都相同，不同源的用戶端腳本(javascript、ActionScript)在沒明确授權的情況下，不能讀寫對方的資源。
URL 解釋 是否跨域
http://www.morethink.cn 原來的URL
http://www.image.morethink.cn 子域名 跨域(cookie也無法通路)
http://morethink.cn 不加www 跨域
https://www.morethink.cn 更改協定 跨域
http://www.morethink.cn:8080 更改端口号 跨域

原因：

同源政策的目的，是為了保證使用者資訊的安全，防止惡意的網站竊取資料。

設想這樣一種情況：A網站是一家銀行，使用者登入以後，又去浏覽其他網站。如果其他網站可以讀取A網站的Cookie，會發生什麼？

很顯然，如果Cookie包含隐私（比如存款總額），這些資訊就會洩漏。更可怕的是，Cookie往往用來儲存使用者的登入狀态，如果使用者沒有登出，其他網站就可以冒充使用者，為所欲為。因為浏覽器同時還規定，送出表單不受同源政策的限制。

由此可見，"同源政策"是必需的，否則 Cookie 可以共享，網際網路就毫無安全可言了。

同源政策限制以下幾種行為：

  1. Cookie、LocalStorage 和 IndexDB 無法讀取
  2. DOM 和 Js對象無法獲得
  3. AJAX 請求不能發送

模拟跨域問題

測試URL為 http://localhost:80/home/allProductions

可以直接在浏覽器

console

中執行

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:80/home/allProductions',true); xhr.send(); xhr.onreadystatechange=function() { if(xhr.readyState ==

在任意網站打開控制台，執行此段代碼可以模拟跨域請求。

在知乎控制台打開報錯如下

java springmvc 前端 跨域問題什麼是跨域問題模拟跨域問題怎麼解決跨域問題JSONPCORSWebSocket

因為知乎是https，報錯與普通的http協定不同。

再澄清一下跨域問題：

  1. 并非浏覽器限制了發起跨站請求，而是跨站請求可以正常發起，但是傳回結果被浏覽器攔截了。最好的例子是CRSF跨站攻擊原理，無論是否跨域，請求已經發送到了後端伺服器！
  2. 但是，有些浏覽器不允許從HTTPS的域跨域通路HTTP，比如Chrome和Firefox，這些浏覽器在請求還未發出的時候就會攔截請求，這是一個特例。

在部落格園控制台打開報錯如下

怎麼解決跨域問題

解決方案有很多

  1. 通過jsonp跨域
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe跨域
  5. postMessage跨域
  6. 跨域資源共享（CORS）
  7. 前端通過Nginx解決跨域問題
  8. nodejs中間件代理跨域
  9. WebSocket協定跨域

這裡主要介紹SpringMVC解決跨域問題的方式。

  1. JSONP
  2. CORS
  3. WebSocket

JSONP

可以直接參考Spring MVC 4.1 支援jsonp進行配置你的SpringMVC注解

JSONP 原理

我雖然請求不了json資料，但是我可以請求一個

Content-Type

為

application/javascript

的JavaScript對象，這樣就可以避免浏覽器的同源政策。

就是當伺服器接受到名為

jsonp

或者

callback

的參數時，傳回

Content-Type: application/javascript

的結果，進而避免浏覽器的同源政策檢測。

  1. 在控制台中直接進行測試你的jsonp是否配置成功
java springmvc 前端 跨域問題什麼是跨域問題模拟跨域問題怎麼解決跨域問題JSONPCORSWebSocket
  1. 使用JQuery測試你的jsonp是否配置成功(需要自己添加jQuery.js) 
<!DOCTYPE html>
<html hljs-string">"en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> function println(data) { console.log(data); console.log('print'); } function jsonp_test() { $.ajax({ type: "get", url: "http://localhost:80/home/allProductions", dataType: "jsonp", jsonp: "callback",//傳遞給請求處理程式或頁面的，用以獲得jsonp回調函數名的參數名(一般預設為:callback) jsonpCallback: "println", //傳回後調用的處理函數 error: function () { //請求出錯的處理 alert("請求出錯"); } }); } </script> </head> <body onload="jsonp_test()"> </body> </html>

CORS

CORS是一個W3C标準，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它允許浏覽器向跨源伺服器，發出XMLHttpRequest請求，進而克服了AJAX隻能同源使用的限制。

CORS需要浏覽器和伺服器同時支援。

  1. 所有浏覽器都支援該功能，IE浏覽器不能低于IE10。

    整個CORS通信過程，都是浏覽器自動完成，不需要使用者參與。 對于開發者來說，CORS通信與同源的AJAX通信沒有差别，代碼完全一樣。浏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。

  2. 實作CORS通信的關鍵是伺服器。隻要伺服器實作了CORS接口，就可以跨源通信。

即CORS與普通請求代碼一樣。

CORS與JSONP相比

  1. JSONP隻能實作GET請求，而CORS支援所有類型的HTTP請求。
  2. 使用CORS，開發者可以使用普通的XMLHttpRequest發起請求和獲得資料，比起JSONP有更好的錯誤處理。
  3. JSONP主要被老的浏覽器支援，它們往往不支援CORS，而絕大多數現代浏覽器都已經支援了CORS。

@CrossOrigin

 注解

此注解既可用于方法也可用于類

源碼如下：

@CrossOrigin(origins = "http://www.zhihu.com")
    @RequestMapping(value = "/allProductions", method = RequestMethod.GET) public Result getAllOldProductions() { }

@CrossOrigin

注解既可注解在方法上，也可注解在類上。

完成配置之後

XML全局配置

所有跨域請求都可以通路

<mvc:cors>
    <mvc:mapping path="/**" /> </mvc:cors>

更加細粒度的配置：

<mvc:cors>

    <mvc:mapping path="/api/**" allowed-origins="http://domain1.com, http://domain2.com" allowed-methods="GET, PUT" allowed-headers="header1, header2, header3" exposed-headers="header1, header2" allow-credentials="false" max-age="123" /> <mvc:mapping path="/resources/**" allowed-origins="http://domain1.com" /> </mvc:cors>

WebSocket

WebSocket是一種通信協定，使用ws://（非加密）和wss://（加密）作為協定字首，在2008年誕生，2011年成為國際标準。所有浏覽器都已經支援了。

它的最大特點就是，伺服器可以主動向用戶端推送資訊，用戶端也可以主動向伺服器發送資訊，是真正的雙向平等對話，屬于伺服器推送技術的一種。

該協定不實行同源政策，隻要伺服器支援，就可以通過它進行跨源通信。

請求頭資訊：(多了個 origin)

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com

響應頭：(如果origin在白名單内)

相比于HTTP/2

HTTP/2隻是對HTML、CSS等JS資源的傳輸方式進行了優化，并沒有提供新的JS API，不能用于實時傳輸消息，也無法推送指定的資訊。

參考文檔：

  1. 跨域
    • 浏覽器同源政策及其規避方法
    • 跨域資源共享 CORS 詳解
  2. SpringMVC 跨域解決方法
    • Spring MVC 4.2 增加 CORS 支援
  3. 前端常見跨域解決方案（全）

1. CORS 簡介

同源政策（same origin policy）是浏覽器安全的基石。在同源政策的限制下，非同源的網站之間不能發送 ajax 請求的。

為了解決這個問題，w3c 提出了跨源資源共享，即 CORS(Cross-Origin Resource Sharing)。

CORS 做到了兩點：

  1. 不破壞即有規則
  2. 伺服器實作了 CORS 接口，就可以跨源通信

基于這兩點，CORS 将請求分為兩類：簡單請求和非簡單請求。

1.1 簡單請求

可以先看下 CORS 出現前的情況：跨源時能夠通過 script 或者 image 标簽觸發 GET 請求或通過表單發送一條 POST 請求，但這兩種請求 HTTP 頭資訊中都不能包含任何自定義字段。

簡單請求對應該規則，是以對簡單請求的定義為：

請求方法是 

HEAD

、

GET

 或 

POST

 且 HTTP 頭資訊不超過以下幾個字段：

Accept

、

Accept-Language

、

Content-Language

、

Last-Event-ID

、

Content-Type

（隻限于 

application/x-www-form-urlencoded

、

multipart/form-data

、

text/plain

）。

比如有一個簡單請求：

  1.   GET / test HTTP/1.1
  2.   Accept: */*
  3.   Accept-Encoding: gzip, deflate, sdch, br
  4.   Origin: http://www.examples.com
  5.   Host: www.examples.com

對于這樣的簡單請求，CORS 的政策是請求時，**在頭資訊中添加一個 Origin 字段**，伺服器收到請求後，根據該字段判斷是否允許該請求。

  1. 如果允許，則在 HTTP 頭資訊中添加 

    Access-Control-Allow-Origin

      字段，并傳回正确的結果
  2. 如果不允許，則不在頭資訊中添加 

    Access-Control-Allow-Origin

      字段。

浏覽器先于使用者得到傳回結果，根據有無 

Access-Control-Allow-Origin

 字段來決定是否攔截該傳回結果。

對于 CORS 出現前的一些服務，CORS 對他們的影響分兩種情況：

  1. script 或者 image 觸發的 GET 請求不包含 Origin 頭，是以不受到 CORS 的限制，依舊可用。
  2. 如果是 ajax 請求，HTTP 頭資訊中會包含 Origin 字段，由于伺服器沒有做任何配置，是以傳回結果不會包含 

    Access-Control-Allow-Origin

     ，是以傳回結果會被浏覽器攔截，接口依舊不可以被 ajax 跨源通路。

可以看出，CORS 的出現，沒有對”舊的“服務造成任何影響。

另外，除了提到的 

Access-Control-Allow-Origin

 還有幾個字段用于描述 CORS 傳回結果：

  1. Access-Control-Allow-Credentials: 可選，使用者是否可以發送、處理 cookie。
  2. Access-Control-Expose-Headers：可選，可以讓使用者拿到的字段。有幾個字段無論設定與否都可以拿到的，包括：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。

1.2 非簡單請求

除了簡單請求之外的請求，就是非簡單請求。

對于非簡單請求的跨源請求，**浏覽器會在真實請求發出前**，增加一次 OPTION 請求，稱為預檢請求（preflight request）。預檢請求将真實請求的資訊，包括請求方法、自定義頭字段、源資訊添加到 HTTP 頭資訊字段中，詢問伺服器是否允許這樣的操作。

比如對于 

DELETE

 請求：

  1.   OPTIONS /test HTTP/1.1
  2.   Origin: http://www.examples.com
  3.   Access-Control-Request-Method: DELETE
  4.   Access-Control-Request-Headers: X-Custom-Header
  5.   Host: www.examples.com

與 CORS 相關的字段有：

  1. Access-Control-Request-Method

     : 真實請求使用的 HTTP 方法。

  2. Access-Control-Request-Headers

     : 真實請求中包含的自定義頭字段。

伺服器收到請求時，需要分别對 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 進行驗證，驗證通過後，會在傳回 Http 頭資訊中添加

  1.   Access-Control-Allow-Origin: http://www.examples.com
  2.   Access-Control-Allow-Methods: GET, POST, PUT, DELETE
  3.   Access-Control-Allow-Headers: X-Custom-Header
  4.   Access-Control-Allow-Credentials: true
  5.   Access-Control-Max-Age:

他們的含義分别是：

  1. Access-Control-Allow-Methods: 真實請求允許的方法
  2. Access-Control-Allow-Headers: 伺服器允許使用的字段
  3. Access-Control-Allow-Credentials: 是否允許使用者發送、處理 cookie
  4. Access-Control-Max-Age: 預檢請求的有效期，機關為秒。有效期内，不會重複發送預檢請求

當預檢請求通過後，浏覽器會發送真實請求到伺服器。這就實作了跨源請求。

了解完 CORS，接下來我們來搭建簡單的 Spring MVC 服務，并進一步了解 Spring MVC 如何配置 CORS。

2. Spring MVC 環境搭建

打開 http://start.spring.io/，添加 Web Dependency，然後選擇 Generate Project，下載下傳 zip 檔案，就得到了一個 spring boot demo。

java springmvc 前端 跨域問題什麼是跨域問題模拟跨域問題怎麼解決跨域問題JSONPCORSWebSocket

解壓 zip 檔案，輕按兩下 pom.xml 打開或用 IDEA、Eclipse 将項目按照 maven 導入。

根據 Group、Artifact、Dependencies 填寫的不同，項目目錄結構可能有些許差别，我的項目結構如下：

  1.   ├── src
  2.   │ ├── main/java
  3.   │ | └── net/xiayule/spring/cors
  4.   │ | └── SpringBootCorsTestApplication.java
  5.   | └── resources
  6.   | ├── static
  7.   | ├── templates
  8.   | └── application.properties
  9.   |
  10.   └── pom.xml

我們需要關心的隻有 SpringBootCorsTestApplication.java。在 SpringBootCorsTestApplication.java 添加以下代碼：

  1.   @RestController
  2.   @SpringBootApplication
  3.   public class SpringBootCorsTestApplication {
  4.   @RequestMapping(value = "/test")
  5.   public String greetings() {
  6.   return "{\"project\":\"just a test\"}";
  7.   }
  8.   public static void main(String[] args) {
  9.   SpringApplication.run(SpringBootCorsTestApplication.class, args);
  10.   }
  11.   }

@RequestMapping(value = "/test")

 的含義是該方法接受來自 

/test

 的請求，并且提供了對 HTTP 的 GET、POST、DELETE 等方法的支援。

運作項目的方法為，在項目根目錄執行 

mvn spring-boot:run

 啟動應用，打開浏覽器通路 

http://localhost:8080

 即可看到效果：

java springmvc 前端 跨域問題什麼是跨域問題模拟跨域問題怎麼解決跨域問題JSONPCORSWebSocket

後端服務搭建好了，接着實作前端。為了簡單，直接建立一個 test.html 檔案，添加以下内容：

  1.   <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.   <title>Hello CORS</title>
  5.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  6.   <script>
  7.   $(document).ready(function() {
  8.   $.ajax({
  9.   url: "http://localhost:8080/test",
  10.   method: "POST",
  11.   contentType: "application/json; charset=utf-8"
  12.   }).then(function(data, status, jqxhr) {
  13.   alert(data)
  14.   });
  15.   });
  16.   </script>
  17.   </head>
  18.   <body>
  19.   </body>
  20.   </html>

使用浏覽器打開該檔案，就會觸發一條向 

http://localhost:8080

 的請求。可以通過修改上面代碼的 method，來觸發不同類型的請求。

由于是直接使用浏覽器打開，**網頁的源為 null**, 當向源 

http://localhost:8080

 請求時，就變成了跨源請求，是以如果後端不加 CORS 的配置，傳回的 HTTP 頭資訊中不會包含 

Access-Control-Allow-Origin

，是以浏覽器會報出如下錯誤：

java springmvc 前端 跨域問題什麼是跨域問題模拟跨域問題怎麼解決跨域問題JSONPCORSWebSocket

3. 配置 CORS

一個應用可能會有多個 CORS 配置，并且可以設定每個 CORS 配置針對一個接口或一系列接口或者對所有接口生效。

舉例來說，我們需要：

  1. 讓 /test 接口支援跨源通路，而 /test/1 或 /api 等其它接口不支援跨源通路
  2. 讓 /test/* 這一類接口支援跨源通路，而 /api 等其它接口不支援跨源通路
  3. 站點所有的接口都支援跨源通路

對第一種情況，如果想要對某一接口配置 CORS，可以在方法上添加 CrossOrigin 注解：

  1.   @CrossOrigin(origins = {"http://localhost:9000", "null"})
  2.   @RequestMapping(value = "/test", method = RequestMethod.GET)
  3.   public String greetings() {
  4.   return "{\"project\":\"just a test\"}";
  5.   }

第二種情況，如果想對一系列接口添加 CORS 配置，可以在類上添加注解，對該類聲明所有接口都有效：

  1.   CrossOrigin(origins = { "http://localhost:9000", "null"})
  2.   @RestController
  3.   @SpringBootApplication
  4.   public class SpringBootCorsTestApplication {
  5.   // xxx
  6.   }

第三種情況，添加全局配置，則需要添加一個配置類：

  1.   @Configuration
  2.   public class WebConfig extends WebMvcConfigurerAdapter {
  3.   @Override
  4.   public void addCorsMappings(CorsRegistry registry) {
  5.   registry.addMapping("/**")
  6.   .allowedOrigins("http://localhost:9000", "null")
  7.   .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
  8.   .maxAge(
  9.   .allowCredentials(true);
  10.   }
  11.   }

另外，還可以通過添加 Filter 的方式，配置 CORS 規則，并手動指定對哪些接口有效。

  1.   @Bean
  2.   public FilterRegistrationBean corsFilter() {
  3.   UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  4.   CorsConfiguration config = new CorsConfiguration();
  5.   config.setAllowCredentials(true); config.addAllowedOrigin("http://localhost:9000");
  6.   config.addAllowedOrigin("null");
  7.   config.addAllowedHeader("*");
  8.   config.addAllowedMethod("*");
  9.   source.registerCorsConfiguration("/**", config); // CORS 配置對所有接口都有效
  10.   FilterRegistrationBean bean = newFilterRegistrationBean(new CorsFilter(source));
  11.   bean.setOrder(
  12.   return bean;
  13.   }

4. 實作剖析

無論是通過哪種方式配置 CORS，其實都是在構造 CorsConfiguration。

一個 CORS 配置用一個 

CorsConfiguration

 類來表示，它的定義如下：

  1.   public class CorsConfiguration {
  2.   private List<String> allowedOrigins;
  3.   private List<String> allowedMethods;
  4.   private List<String> allowedHeaders;
  5.   private List<String> exposedHeaders;
  6.   private Boolean allowCredentials;
  7.   private Long maxAge;
  8.   }

Spring MVC 中對 CORS 規則的校驗，都是通過委托給 DefaultCorsProcessor 實作的。

DefaultCorsProcessor 處理過程如下：

  1. 判斷依據是 Header 中是否包含 Origin。如果包含則說明為 CORS 請求，轉到 2；否則，說明不是 CORS 請求，不作任何處理。
  2. 判斷 response 的 Header 是否已經包含 Access-Control-Allow-Origin，如果包含，證明已經被處理過了, 轉到 3，否則不再處理。
  3. 判斷是否同源，如果是則轉交給負責該請求的類處理
  4. 是否配置了 CORS 規則，如果沒有配置，且是預檢請求，則拒絕該請求，如果沒有配置，且不是預檢請求，則交給負責該請求的類處理。如果配置了，則對該請求進行校驗。

校驗就是根據 CorsConfiguration 這個類的配置進行判斷：

  1. 判斷 origin 是否合法
  2. 判斷 method 是否合法
  3. 判斷 header 是否合法
  4. 如果全部合法，則在 response header 中添加響應的字段，并交給負責該請求的類處理，如果不合法，則拒絕該請求。

5. 總結

本文介紹了 CORS 的知識以及如何在 Spring MVC 中配置 CORS。

最終在項目中采用springmvc的cors 實作了跨域

轉載于:https://www.cnblogs.com/cfas/p/9401599.html

java 前端 測試
上一篇: springMvc如何和前端頁面互動，傳輸json資料springMvc和前端傳輸資料
下一篇: 前端和背景是如何互動的？

繼續閱讀