當前位置：首頁 > 编程语言 > java >内容正文

java

Java - 探究前后分离带来的跨域问题

發布時間：2025/3/21 java 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 Java - 探究前后分离带来的跨域问题小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

為什么會產生跨域問題
同源策略（Same-origin policy）
解決方案
- 服務端解決方案
- - 簡單請求
  - 復雜請求
  - 測試
  - - 簡單請求測試
    - 復雜請求測試
- 代理服務器，反向代理接口請求
- jsonp 方式

為什么會產生跨域問題

1995年，Netscape 公司出于安全的考慮在瀏覽器中引入了“同源策略”。

跨域問題只出現在瀏覽器訪問的頁面，因為這是瀏覽器為了保戶用戶安全而制造的策略。假如沒有這層保護，網站就很容易受到跨站偽造請求（CSRF）的攻擊。

同源策略（Same-origin policy）

瀏覽器端對請求的處理中，如果兩個 URL 的協議、域名和端口都相同，我們就稱這兩個URL 同源

我們來舉幾個例子

同源

http://www.xxxx.com/indexhttp://www.xxxx.com/module/path1

非同源

http://www.xxxx.com/indexhttps://www.xxxx.com/module/path1 http://www.xxxx.com/indexhttp://www.yyyy.com/module/path1 http://www.xxxx.com/indexhttp://www.xxxx.com:8081/module/path1

兩個相同的源之間瀏覽器默認其是可以相互訪問資源和操作 DOM 的。兩個不同的源之間若想要相互訪問資源或者操作 DOM，那么會有一套基礎的安全策略的制約。

安全性：瀏覽器要防止當前站點的私密數據不會向其他站點發送

如當前站點的Cookie,LocalStorage,IndexDb 不會被發送到其他站點或被其他站點腳本讀取到。
無法跨域獲取Dom，無法發送Ajax請求。

可用性：大型站點的圖片，音視頻等資源，希望部署在獨立服務器上，為緩解當前服務的壓力，開放某些特定的方式，訪問非同源站點

如：<script><img><iframe><link><vedio>等，可以同src屬性跨域訪問允許跨域提交表單/或重定向請求

解決方案

服務端解決方案

跨域請求分兩種情況

簡單請求

請求方法使用GET/HEAD/POST請求之一

僅能使用CORS安全的頭部，Accept,Accept-Language, Content-Language,Content-Type

Content-Type的值只能是：text/plain,multipart/form-data,application/x-www-form-urlencoded三者其中之一

請求從domain a 發過來，請求到web domain b , 如果這個時候domain b 返回一個允許，可以解決這個問題。

服務端解決方案：在http響應頭中添加 Access-Control-Allow-Origin 頭，值為信任的站點

復雜請求

不符合簡單請求條件的即為復雜請求，訪問跨域資源前，需要發起preflight預檢請求（OPTIONS請求）詢問何種請求是被允許的，預檢請求失敗，則不會發起正式的業務請求，預檢請求成功，然后發起正式請求。

測試

隨便寫個spring boot 的工程，啟動2個端口一個8080 一個8081 ，訪問8080的頁面，調用8081的后臺服務，用來測試

簡單請求測試

來看第一個

CASE1: 【GET請求】

點擊訪問

服務端后臺的代碼

添加

response.addHeader("Access-Control-Allow_origin","http://localhost:8080");

重啟后，重新測試

CASE2: 【表單請求】

目前的后端代碼

來測試走一波

重啟重新測試， OK

復雜請求測試

【復雜請求】

和上面Case2的請求一模一樣，除了 Content-Type , 那還能用上面的添加響應頭解決嗎？
答案是不能的。。。。。

我們用wireshark來跟蹤下 option 預檢的請求

Spring Boot 官方給出了解決方案

我們就看全局的這個配置吧

請求下跟蹤下

good

代理服務器，反向代理接口請求

location /api {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://localhost:8081/;}

說一下為什要rewrite，因為 api 這個前綴僅僅用于前臺頁面發請求時候攜帶，后臺并沒有 api這個context，所以需要在nnginx 通過rewrite機制來將api 替換掉。

rewrite ^/api/(.*)$ /$1 break;

這個就是一 /api開頭的請求，替換為 $1 ，這個$1就是請求中/api后面的內容， break 即為匹配到則不往后面找了。

jsonp 方式

基于

可用性：大型站點的圖片，音視頻等資源，希望部署在獨立服務器上，為緩解當前服務的壓力，開放某些特定的方式，訪問非同源站點。