node.js中跨域請求實現(xiàn)方法詳解

更新時間：2024年12月12日 10:12:18 作者：小灰灰學編程

這篇文章主要介紹了node.js中跨域請求實現(xiàn)方法詳解,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <button id="btnGet">get請求</button>
  <button id="btnPost">post請求</button>
  <script>
    $('#btnGet').on('click', function(){
      console.log('點擊get請求')
      $.ajax({
        type: 'GET',
        url: 'http://127.0.0.1:3000/api/get',
        data: {
          name: 'lbj',
          number: 23
        },
        success: (res) =>{
          console.log(res, 'get請求成功')
        }
      })
    })
    $('#btnPost').on('click', function(){
      console.log('點擊post請求')
      $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:3000/api/post',
        data: {
          name: 'lbj',
          number: 23
        },
        success: (res) =>{
          console.log(res, 'get請求成功')
        }
      })
    })
  </script>
</body>
</html>

常見的解決跨域請求的方法

CORS（跨源資源共享）
JSONP
代理服務器
Nginx反向代理

CORS的核心原理

是通過在HTTP響應頭中添加特定的CORS相關字段，告訴瀏覽器哪些域名是被允許的，從而解決跨域請求的問題。這些字段包括：

Access-Control-Allow-Origin：指定允許訪問的域名。可以是單個域名，也可以是逗號分隔的多個域名，或者使用通配符*表示允許所有域名訪問。
Access-Control-Allow-Methods：指定允許的HTTP方法。例如，GET、POST等。
Access-Control-Allow-Headers：指定允許的HTTP頭部。例如，Content-Type等。
Access-Control-Allow-Credentials：表示是否允許發(fā)送包含憑據(jù)的請求，如Cookie。默認情況下，不發(fā)送憑據(jù)。
Access-Control-Expose-Headers：指定哪些HTTP頭部可以被瀏覽器訪問。

CORS實現(xiàn)方法

// 安裝中間件
// npm install cors
// 導入中間件
const cors = require('cors')
// 配置中間件，要在路由之前
app.use(cors())

CORS的優(yōu)缺點

優(yōu)點：
標準化：CORS是W3C標準，被廣泛支持。
靈活性：可以通過配置允許特定的源、方法和頭。
安全性：可以明確指定哪些資源可以被跨域訪問。
缺點：
配置復雜性：需要仔細配置CORS策略，以確保安全性和功能性。
瀏覽器兼容性：雖然現(xiàn)代瀏覽器都支持CORS，但某些舊版本瀏覽器可能不支持或支持不完全。

jsonp的實現(xiàn)方法

JSONP是一種通過script標簽的src屬性來實現(xiàn)跨域請求的技術。由于script標簽不受同源策略的限制，因此可以加載不同源的腳本。JSONP通常用于GET請求。

jsonp的優(yōu)缺點

優(yōu)點：
兼容性：JSONP在舊版本瀏覽器中也被廣泛支持。
簡單易用：實現(xiàn)起來相對簡單，不需要額外的中間件或配置。缺點：
安全性：JSONP存在安全風險，因為它允許跨域執(zhí)行腳本。
局限性：只支持GET請求，不支持POST等其他HTTP方法。

jsonp的實現(xiàn)

<button id="btnJsonp">jsonp請求</button>

$('#btnJsonp').on('click', function(){
      console.log('點擊jsonp請求')
      $.ajax({
        method: 'GET',
        url: 'http://127.0.0.1:3000/api/jsonp',
        dataType: 'jsonp', 
        success: (res) =>{
          console.log(res, 'jsonp請求成功')
        }
      })
})