cors跨域和json（cors跨域什麼意思）

本文目錄一覽：

• 1、CORS原理及實現
• 2、SpringBoot進階之處理跨域問題(CORS)
• 3、如何解決前端跨域問題？
• 4、【http】什麼是cors跨域
• 5、前端解決跨域都有哪些方法？
• 6、怎麼解決跨域的.以及後續jsonp的原理和實現以及cors怎麼設置

CORS原理及實現

跨域資源共享( CORS )是一種機制，是W3C標準。它允許瀏覽器向跨源服務器，發出 XMLHttpRequest 或 Fetch 請求。並且整個 CORS 通信過程都是瀏覽器自動完成的，不需要用戶參與。

而使用這種 跨域資源共享 的前提是，瀏覽器必須支持這個功能，並且服務器端也必須同意這種 “跨域” 請求。因此實現 CORS 的關鍵是服務器需要服務器。通常是有以下幾個配置：

具體可看：

過程分析：

另外在 CORS 中有 簡單請求 和 非簡單請求 ，簡單請求是不會觸發 CORS 的預檢請求的，而非簡單請求會。

“需預檢的請求” 要求必須首先使用 OPTIONS 方法發起一個預檢請求到服務器，以獲知服務器是否允許該實際請求。”預檢請求“的使用，可以避免跨域請求對服務器的用戶數據產生未預期的影響。

簡單請求不會觸發 CORS 的預檢請求，若請求滿足所有下述條件，則該請求可視為“簡單請求”：

簡單回答 ：

詳細回答 ：

除了上面這些請求外，都是非簡單請求。

若是跨域的非簡單請求的話，瀏覽器會首先向服務器發送一個預檢請求，以獲知服務器是否允許該實際請求。

整個過程大概是：

這裡有兩點要注意：

一：

Access-Control-Request-Method 沒有 s

Access-Control-Allow-Methods 有 s

二：

關於 Access-Control-Max-Age ，瀏覽器自身也有維護一個最大有效時間，如果該首部字段的值超過了最大有效時間，將不會生效，而是以最大有效時間為主。

還是在原本 JSONP 的那個案例上。

我在根目錄下新建了一個文件夾 cors ，並往裡面添加了一個 index.html 文件：

/cors/index.html

為了後面也方便調試，用 node 簡單寫了一個前端的本地服務和後端的本地服務。

在根目錄下新建 client.js 文件，並寫入：

./client.js :

在根目錄下新建 index.html 文件，並寫入：

./index.html :

(以上：實現了一個簡單的前端路由效果)

在根目錄下新建 server.js 文件，並寫入：

./server.js :

並給 package.json 中配置兩個啟動指令：

package.json :

OK?，來分別啟動一下 npm run client 和 npm run server

並打開頁面的 127.0.0.1:8000/cors （或者打開 127.0.0.1:8000 然後點擊 CORS 這個 a 標籤）

點擊 獲取name 按鈕，可以看到能夠正常獲取到本地服務器的數據了。

接着讓我們來改造一下 ./cors/index.html 中的按鈕點擊請求，讓它變成一個非簡單請求：

./cors/index.html :

此時，打開頁面點擊按鈕會發現發送了兩次 corsname 的請求：

（一）預檢請求：

（二）實際請求：

對於跨域 XMLHttpRequest 或 Fetch 請求，瀏覽器 不會 發送身份憑證信息。如果要發送憑證信息，需要設置 XMLHttpRequest 的某個特殊標誌位。

例如我們想要在跨域請求中帶上 cookie ，需要滿足3個條件：

所以為了模擬這個效果，讓我們來寫一個小小的登錄+獲取數據的功能吧。

首先對於web端，我新增了一個登錄按鈕，並且配置了一下 axios ：

./cors/index.html :

接着為了更方便的模擬後台請求，我需要在項目中安裝兩個中間件：

接着修改一下 server.js 的後台配置：

./server.js :

現在讓我們重啟一下服務，然後打開頁面看看效果：

（一）點擊登錄：

（二）點擊獲取name：

（三）查看cookie：

方案一：發出簡單請求(這不是廢話嗎…)

方案二：服務端設置 Access-Control-Max-Age 字段，在有效時間內瀏覽器無需再為同一個請求發送預檢請求。但是它有局限性：只能為同一個請求緩存，無法針對整個域或者模糊匹配 URL 做緩存。

SpringBoot進階之處理跨域問題(CORS)

大家好，一直以來我都本着 用最通俗的話理解核心的知識點， 我認為所有的難點都離不開 「基礎知識」 的鋪墊

「大佬可以繞過 ~」

如果你是一路看過來的，很高興你能夠耐心看完。之前帶大家學了 Springboot 基礎部分，對基本的使用有了初步的認識, 接下來的幾期內容將會帶大家進階使用，會先講解基礎 中間件 的使用和一些場景的應用，或許這些技術你聽說過，沒看過也沒關係，我會帶大家一步一步的入門，耐心看完你一定會有 收穫 ~

上期帶大家學習了 Springboot 中如何集成 MyBatis分頁插件PageHelper 以及它的一個基本使用, 本期將帶大家學習 SpringBoot 中如何處理跨域問題的，同樣的，我們集成到 Springboot 中。最近github可能會被牆，所以我把源碼放到了國內gitee上,本節我們依然使用上期的代碼

同樣的，為了照顧小白同學，依然先說一下啥是跨域。說到跨域問題，如果你是 前端 同學，肯定不會陌生, 你有可能調接口調着調着，發現請求發布出去，控制台會報 CORS 錯誤, 這時候你會找後台老大哥給你處理一下。然而現在前端工程中，一般都會有 proxy代理 ，這樣也能解決問題，這只是本地調試，但上線還會有問題, 除非你發布的時候你們是同一個 域 下。

好，說了這麼多，大概明白跨域是如何產生了，就是說前端調用的後端接口不屬於同一個 域（域名或端口不同） ，就會產生跨域問題，也就是說你的應用訪問了該應用域名或端口之外的域名或端口,這裡給大家總結一下，產生跨域的三個條件:

解決思路大致可以分為以下幾方面:

從源頭瀏覽器解決,解除跨域機制，用戶自己設置瀏覽器，這不大現實，好, pass

發送 JSONP 請求替代XHR請求，並不能適用所有的請求方式， 不推薦

之前我們提到前端本地工程開啟 Proxy ,那麼服務端可不可進行代理呢？答案是可以的，怎麼做？可以通過 nginx 進行代理,給大家簡單演示一下:

nginx 是當今比較火的 web 服務器，常用於服務代理, 等教大家部署的時候會講一下

這也是本節要講的內容，我們先不直接的給大家展示代碼，先說一下它的原理。

一般我們下載的瀏覽器比如 Chrome ，它都是自行默認開啟 跨域限制 的，那我們如何判斷我們發出去的請求是一個 跨域請求 呢，打開瀏覽器開發者工具，在請求的請求頭中就可以發現，如果不是一個跨域請求，它只有 Host ,如果是一個 跨域請求 它會多一個 Origin ，告訴瀏覽器我倆請求的地方不一樣

跨源資源共享(CORS) 是一種基於 HTTP頭 的機制，該機制通過允許服務器標示除了它自己以外的其它 origin（域，協議和端口 ），這樣瀏覽器就可以訪問加載這些資源。跨源資源共享還通過一種機制來檢查服務器是否會允許要發送的真實請求，該機制通過瀏覽器發起一個到服務器託管的跨源資源的 預檢(OPTION) 請求。在預檢中，瀏覽器發送的頭中標示有HTTP方法和真實請求中會用到的頭，那麼具體是怎麼設置 頭 的呢?

服務端通過設置如上，就可以進行跨域訪問了。好，有了基本的理論之後，我們一起看一下在 Springboot 中如何解決的：

是不是很簡單~ 它的實現機制主要是通過請求 攔截器 實現的,你慢慢會發現，隨着學習的深入，你會遇到各種 攔截器 技術

本期到這裡就結束了，總結一下，本節主要帶大家認識了什麼是 跨域 ，以及解決思路，最後教大家 Sprinboot 中是如何配置跨域訪問的，源碼已更新，大家可以自行試一下

如何解決前端跨域問題？

可以使用服務器代理或者在後端設置允許跨域。

現在的項目一般是在後端設置允許跨域，前端在帶有允許跨域的情況下，可以像沒有跨域一樣正常訪問。

如果前端單獨發布到服務器，也可以在服務器是設置代理，使用代理轉發請求。

【http】什麼是cors跨域

前端開發中，常常需要進行跨域請求。既然提到跨域，首先我們的知道什麼是“同源策略”。

同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。

如果協議，端口（如果指定了一個）和域名對於兩個頁面是相同的，則兩個頁面具有相同的源。

同一個源內，資源的訪問是很自由的。就跟在自己家中，想開冰箱開冰箱，想幹啥幹啥。如果你想訪問不同源的資源，可就沒那麼自由了，這就是跨域。

關於跨域，常用的JSONP應該都知道。JSONP的原理是什麼呢？我們來看看大神賀師俊的解釋：

很簡單，就是利用script標籤沒有跨域限制的“漏洞”（歷史遺迹啊）來達到與第三方通訊的目的。當需要通訊時，本站腳本創建一個script元素，地址指向第三方的API網址，並提供一個回調函數來接收數據（函數名可約定，或通過地址參數傳遞）。 第三方產生的響應為json數據的包裝（故稱之為jsonp，即json padding），這樣瀏覽器會調用callback函數，並傳遞解析後json對象作為參數。本站腳本可在callback函數里處理所傳入的數據。

可以知道JSONP就是個bug般的存在啊，如果你是一個有潔癖的程序員回想說：這不合理，這部乾淨。因此我們引出cors。

那麼，什麼是cors呢？

我們來看看互動百科的解釋：

CORS（跨來源資源共享）是一份瀏覽器技術的規範，提供了Web服務從不同網域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，是JSONP模式的現代版。

維基百科的解釋(手動谷歌)：

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served.

這樣看來，其實嘛，cors就是一個規範，機制，基於這個規範，不同源之間才可以請求資源。相當於一個江湖規矩，大家都按規矩來嘛不是？不講規矩？信不信小拳拳捶你。

所以呢，要想使用cors跨域訪問，你就得講規矩。下面我們來看看有哪些規矩。

跨域資源共享標準（ cross-origin sharing standard ）允許在下列場景中使用跨域 HTTP 請求：

cors中有個術語叫 “簡單請求” ，若請求滿足所有下述條件，則該請求可視為“簡單請求”：

使用下列方法之一：

之所以區分簡單請求，是因為cors需要處理一些“非簡單請求”，這種特殊處理叫做“預檢請求”。大人物來了，總要提前準備準備吧，封路啥的blabla。

預檢請求的作用是 提前獲知服務器是否允許該實際請求 。“預檢請求”的使用，可以 避免跨域請求對服務器的用戶數據產生未預期的影響 。

一張圖可以清晰看到提前發送預檢請求的cors請求

Request Headers:

Response Header:

cors在koa中的使用：

相關鏈接：

前端解決跨域都有哪些方法？

什麼是跨域？

瀏覽器發送的請求地址（URL）與所在頁面的地址 不同（端口/協議/域名 其一不同）。簡言之，瀏覽器發出的請求url，與其所在頁面的url不一樣。此時，同源策略會讓瀏覽器拒收 服務器響應回來的數據，報錯信息如下：

最常用的四種跨域解決方案

1.cors

cors跨域資源共享允許是在服務端”Access-Control-Allow-Origin”字段設置的，當將cors設置為允許某個地址訪問時，該地址就可以跨域訪問這個服務器地址。當cors設置為”*”時即允許所有地址訪問時，則表示所有地址都可以跨域訪問這個服務器地址的資源。

2、 通過jsonp跨域

Jsonp是Json的一種“使用模式”，他就可以解決瀏覽器遇到的跨域問題，我們可以動態創建script，再請求一個帶參網址實現跨域通信。用Jsonp請求得到的是JavaScript，相當於直接用JavaScript解析。

3、postMessage跨域

在h5中新增了postMessage方法，postMessage可以實現跨文檔消息傳輸，我們可以通過Windows的message事件來監聽發送跨文檔消息傳輸內容。

4、proxy（代理）

原理：因為同源策略只是針對瀏覽器的安全策略，但是服務端並不受同源策略的限制，也就不存在跨域的問題。

怎麼解決跨域的.以及後續jsonp的原理和實現以及cors怎麼設置

XMLHttpRequest跨域對於IE而言可以直接完成，但是對於其他瀏覽器而言報錯，無法跨域，有人說要設置瀏覽器；

因此，需要服務器給出回調函數callback，用於客戶端調用；

這就是所謂的jsonp調用；

如果是自己的服務器和客戶端，但是用協議訪問，也是跨域，當然可以設置自己的服務器代碼，添加cros等設置即可，網頁搜索一大把。

如果是其他的服務器，那就要他們給出回調函數，如果沒有，就不能完美的調用，除非用後台代碼。