設置瀏覽器跨域訪問

① mac版chrome怎麼設置跨域訪問

• 工具

1. 老版本的chrome瀏覽器；

2. 新版本的chrome瀏覽器；

• 說明

  新版本的chrome瀏覽器提高了跨域設置的門檻，原來的方法不再適用，分為兩部分介紹一下老、新版本chrome的跨域設置方法。

• 老版本設置步驟

1. 下載並安裝好chorme瀏覽器後在桌面找到瀏覽器快捷圖標並點擊滑鼠右鍵的屬性一欄。

   

② 怎麼設置chrome瀏覽器可以跨域

方法/步驟

1,首先谷歌快捷方式上右擊，在下拉列表中選擇屬性。

③ 遇上瀏覽器跨域問題怎麼辦

出於安全原因，瀏覽器禁止 Ajax 調用駐留在當前原點之外的資源。例如，當你在一個標簽中檢查你的銀行賬戶時，你可以在另一個選項卡上擁有 EVILL 網站。來自 EVILL 的腳本不能夠對你的銀行 API 做出 Ajax 請求（從你的帳戶中取出錢！）使用您的憑據。

跨源資源共享（CORS）是由大多數瀏覽器實現的 W3C 規范，允許你靈活地指定什麼樣的跨域請求被授權，而不是使用一些不太安全和不太強大的策略，如 IFRAME 或 JSONP。

Spring Framework 4.2 GA 為 CORS 提供了第一類支持，使您比通常的基於過濾器的解決方案更容易和更強大地配置它。所以 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin

1. controller 配置 CORS

1.1 controller 方法的 CORS 配置，您可以向 @RequestMapping 註解處理程序方法添加一個 @CrossOrigin 註解，以便啟用 CORS（默認情況下，@CrossOrigin 允許在 @RequestMapping 註解中指定的所有源和 HTTP 方法）：

其中 @CrossOrigin 中的 2 個參數：

1.2 為整個 controller 啟用 @CrossOrigin

在這個例子中，對於 retrieve() 和 remove() 處理方法都啟用了跨域支持，還可以看到如何使用 @CrossOrigin 屬性定製 CORS 配置。

1.3 同時使用 controller 和方法級別的 CORS 配置，Spring 將合並兩個注釋屬性以創建合並的 CORS 配置。

1.4 如果您正在使用 Spring Security，請確保在 Spring 安全級別啟用 CORS，並允許它利用 Spring MVC 級別定義的配置。

2. 全局 CORS 配置

JavaConfig

使整個應用程序的 CORS 簡化為：

您可以輕松地更改任何屬性，以及僅將此 CORS 配置應用到特定的路徑模式：

如果您正在使用 Spring Security，請確保在 Spring 安全級別啟用 CORS，並允許它利用 Spring MVC 級別定義的配置。

3. XML命名空間

還可以將 CORS 與 MVC XML 命名空間配置。

a) 如果整個項目所有方法都可以訪問，則可以這樣配置；此最小 XML 配置使 CORS 在 /** 路徑模式具有與 JavaConfig 相同的預設屬性：

其中 * 表示匹配到下一層；** 表示後面不管有多少層，都能匹配。

如：

這個可以匹配到的路徑有：

不能匹配的：

因為 * 只能匹配到下一層路徑，如果想後面不管多少層都可以匹配，配置如下：

請求路徑有 /api/，方法示例如下：

c) 如果使用 Spring Security，不要忘記在 Spring 安全級別啟用 CORS：

4. How does it work?

CORS 請求（包括預選的帶有選項方法）被自動發送到注冊的各種 HandlerMapping 。它們處理 CORS 准備請求並攔截 CORS 簡單和實際請求，這得益於 CorsProcessor 實現（默認情況下默認 DefaultCorsProcessor 處理器），以便添加相關的 CORS 響應頭（如 Access-Control-Allow-Origin）。 CorsConfiguration 允許您指定 CORS 請求應該如何處理：允許 origins, headers, methods 等。

a) AbstractHandlerMapping 類的 setCorsConfiguration() 方法允許指定一個映射，其中有幾個 CorsConfiguration 映射在路徑模式上，比如 /api/**。

b) 子類可以通過重寫 AbstractHandlerMapping 類的 getCorsConfiguration(Object, HttpServletRequest) 方法來提供自己的 CorsConfiguration。

c) 處理程序可以實現 CorsConfigurationSource 介面（如 ResourceHttpRequestHandler），以便為每個請求提供一個 CorsConfiguration。

5. 基於過濾器的 CORS 支持

1. 是 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin

2. 非 @CrossOrigin 沒有解決跨域請求問題，而是不正確的請求導致無法得到預期的響應，導致瀏覽器端提示跨域問題。

3. 在 Controller 註解上方添加 @CrossOrigin 註解後，仍然出現跨域問題，解決方案之一就是：

在 @RequestMapping 註解中沒有指定 Get、Post 方式，具體指定後，問題解決。

類似代碼如下：

參考文章：

1. 官方文檔 https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

2. http://fanshuyao.iteye.com/blog/2384189

3. https://blog.csdn.net/taiyangnimeide/article/details/78305131

4. https://blog.csdn.net/snowin1994/article/details/53035433

④ 瀏覽器跨域及其解決方案

title: 瀏覽器跨域及其解決方案
author: May
date: 20220428</pre>

什麼是跨域跨域的表現解決跨域問題- 瀏覽器設置(不推薦)- 前端的非正統解決方式- CORS(跨域資源共享)- 配置nginx反向代理

跨域 出於瀏覽器的同源策略限制， 同源 是指協議、域名、埠都一樣， 同源策略（Sameoriginpolicy） 是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。

調用頁面時介面數據不返回，控制台中會有紅色的報錯信息中有類似於 CORS policy 關鍵字。另外，在最新谷歌瀏覽器中，會有提出類似於loaded over HTTPS此種關鍵字，均可以考慮為跨域導致。

[圖片上傳失敗...(image-26deed-1651135597111)]

tips: 有的時候後台小夥伴使用postman測試好的介面，前端不可以使用，原因就是postman不是瀏覽器，不會有同源限制，同理移動設備app開發和小程序開發也不會有這個問題。這個不是前端bug，同源限制也不是一個不好的規則。

雖然跨域不是一個不好的事情，但是對於前後端分離的web開發來說確實需要解決的，大致的解決方案可分為：

直接從根源解決問題，讓瀏覽器安全策略不起作用。這個方法雖然可以解決問題但是不現實。

官方正統解決方案， CORS規范 允許伺服器向瀏覽器返回一些HTTP Headers，瀏覽器可以基於這些HTTP Headers來決定是否突破SOP的限制。需要後端配合，瀏覽器需要什麼，介面服務給什麼。

nginx是一個高性能的HTTP和反向代理web伺服器，nginx用來解決跨域問題的原理與 前端非正統解決方式 的 proxy 的思路是一致的。項目請求介面由nginx服務發出，獲取到的數據再經由nginx傳遞給前端項目，這樣前端的請求其實都是由nginx處理的，就沒有跨域發生了。

⑤ 如何處理瀏覽器的跨域問題

首先你需要閱讀 CORS ，
首先你需要閱讀 CORS ，
首先你需要閱讀 CORS ，重要的事情說3遍

當瀏覽器發送一個跨域的xhr時，需要注意的是，首先會發送一個 Request Method: OPTIONS 類型的請求，如下圖

當你使用了前端的vue，react,angular等框架時，可以直接使用他們的腳手架，腳手架提供一個配置好的 webpack ,可以在配置文件中的proxy添加代理地址，這樣可以避免跨域問題，如果是自己搭建的框架自行配置 webpack 依然可以實現代理

後台的靜態伺服器（apache,nginx）一般都帶有代理功能，可以自行配置，代理前端項目的xhr請求到真實的後台介面地址，這樣可以避免跨域問題

⑥ 瀏覽器跨域限制的N種解決方式

1. 修改chrome安全策略，帶參啟動

2. 使用xSwitch 瀏覽器插件篡改部分請求

3. 使用本地代理轉發 webpack dev server或者ngnix

4. 一級域名相同可以設置document.domain為一級域名

5. 介面允許跨域調用

123適用於開發調試 45一般用於生產