當前位置：首頁 >

深入跨域问题(2) - 利用 CORS 解决跨域

發布時間：2025/7/14 34 豆豆

生活随笔收集整理的這篇文章主要介紹了深入跨域问题(2) - 利用 CORS 解决跨域小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

閱讀目錄：

深入跨域問題(1) - 初識 CORS 跨域資源共享；

深入跨域問題(2) - 利用 CORS 解決跨域（本篇）

深入跨域問題(3) - 利用 JSONP 解決跨域

深入跨域問題(4) - 利用代理服務器解決跨域

回答問題：

在閱讀這篇文章之前，讀讀第一篇文章，效果會更好！！！回答上一篇文章的問題：

不會觸發 預請求 ，因為是簡單的 GET 方法。

不會觸發 預請求，因為是簡單的 POST 方法，jquery 默認使用 application/x-www-form-urlencoded。

會觸發 預請求 ，雖然是 POST 方法，但是 Content-Type 為 application/json 。并非上文中的三種情況，text/plain ，multipart/form-data，application/x-www-form-urlencoded 。

第三點，是最重要的一點，也是經常出錯的一點，記住觸發預請求三種情況！！！

搭建跨域環境：

模擬客戶端請求：

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Ajax測試</title> </head> <body><script src="./node_modules/jquery/dist/jquery.min.js"></script><script>$.ajax({url: "http://localhost:3000",type: "get",success: function (result) {console.log(result);},error: function (msg) {console.log(msg);}})</script> </body> </html> 復制代碼

后文，將不再粘貼 html 代碼，jquery 也可以用 npm install jquery 下載。

模擬服務器響應，新建 app.js 文件，粘貼并運行 ：

好了，現在雙擊打開 html 文件，就成了：

很明顯，這就是跨域報錯。

處理非預請求

在上述兩個例子中，我們說到，POST 和 GET 方法，都可以實現，非預請求。

關鍵代碼：設置一條 響應首部字段，允許 CORS 跨域資源共享：

response.writeHead(200, {'Access-Control-Allow-Origin': '* } 復制代碼

這里，我們設置為，所有客戶端都可以訪問。

完整代碼：

前端測試代碼：

$.ajax({url: "http://localhost:3000",type: "get",success: function (result) {console.log(result);},error: function (msg) {console.log(msg);} })var data = { name: 'BruceLee', password: '123456' };$.ajax({url: "http://localhost:3000",type: "post",data: JSON.stringify(data),success: function (result) {console.log(result);},error: function (msg) {console.log(msg);} }) 復制代碼

執行結果：

處理 非預請求 就是這么簡單，只需要在后臺設置，一條 響應首部字段 即可。

注意：我們使用 POST 方法時，Jquery 默認使用的 Content-Type: application/x-www-form-urlencoded，所以不會觸發預請求！！！

事實上，不僅僅是 Jquery ，axios 等封裝 Ajax 的庫，都默認采用 Content-Type: application/x-www-form-urlencoded ！！！

處理 POST 預請求

不僅僅是 POST ，所有 預請求 的處理方式都一樣。

POST 方法在設置 contentType 為 application/json 時會觸發預請求。

前端測試代碼：

注意，這里的 contentType 已經修改為 application/json ，這種情況是會觸發 預請求 的！！！

node 服務端代碼：

在這里，我們增加了處理 OPTIONS 方法的邏輯。

測試結果：

很明顯，我們在 OPTIONS 方法內部沒有設置 CORS 響應首部字段，所以出現跨域錯誤；

修改代碼，關鍵代碼：

if (request.method === 'OPTIONS') { response.writeHead(200, {'Access-Control-Allow-Origin': '*', // 設置 optins 方法允許所有服務器訪問 'Access-Control-Allow-Methods': '*', // 允許訪問 POST PUT DELETE 等所有方法 }); response.end( JSON.stringify({state: true}) ); } 復制代碼

在 node 代碼中，我們增加對 OPTIONS 的處理，并且設置允許訪問， POST 方法。

修改代碼后，重啟服務器，并刷新 html 頁面，結果為：

在這里，仍然是有問題,按照報錯描述，我們應該設置 Access-Control-Allow-Headers 響應首部字段。

關鍵代碼：

if (request.method === 'OPTIONS') { response.writeHead(200, {'Access-Control-Allow-Origin': '*', // 設置 optins 方法允許所有服務器訪問 'Access-Control-Allow-Methods': '*', // 允許訪問路徑 '/' POST等所有方法'Access-Control-Allow-Headers': 'Content-Type', // 允許類 Content-Type 頭部 }); response.end( JSON.stringify({state: true}) ); } 復制代碼

我們需要設置，允許使用頭部為 Content-Type 的內容訪問。

完整代碼：

執行結果：

預請求

POST 請求

這樣就完成，對預請求的處理。現在你可以狠狠地告訴后臺：是你沒有處理 OPTIONS 方法！！！

好了，到這里，知道了基礎的 預請求 處理的解決辦法了。

總結：

使用 CORS 跨域資源共享，是需要分成 預請求 與 非預請求 處理的。

非預請求，在服務器內，只需要簡單設置：

'Access-Control-Allow-Origin': '* 復制代碼

預請求，在服務器內，至少要設置三個 響應首部字段：

'Access-Control-Allow-Origin': ?, 'Access-Control-Allow-Methods': ?, 'Access-Control-Allow-Headers': 'Content-Type', 復制代碼

前端使用 content-Type: application/json 的時候，必須注意這是 預請求 ，后端需要處理 OPTIONS 方法

參考與鳴謝：

跨域資源共享 CORS 詳解阮一峰；
瀏覽器同源政策及其規避方法阮一峰；
HTTP訪問控制 (CORS) MDN 文檔；

祝大家編碼愉快，喜歡的話點個贊再走唄！！！

總結

以上是生活随笔為你收集整理的深入跨域问题(2) - 利用 CORS 解决跨域的全部內容，希望文章能夠幫你解決所遇到的問題。

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

CORS

上一篇： Excel vba引用工作表的三种写法
下一篇： redis学习之redis基本数据类型以