快捷導(dǎo)航

node.js中跨域請(qǐng)求實(shí)現(xiàn)方法詳解

更新時(shí)間：2024年12月12日 10:12:18 作者：小灰灰學(xué)編程

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

<!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請(qǐng)求</button>
  <button id="btnPost">post請(qǐng)求</button>
  <script>
    $('#btnGet').on('click', function(){
      console.log('點(diǎn)擊get請(qǐng)求')
      $.ajax({
        type: 'GET',
        url: 'http://127.0.0.1:3000/api/get',
        data: {
          name: 'lbj',
          number: 23
        },
        success: (res) =>{
          console.log(res, 'get請(qǐng)求成功')
        }
      })
    })
    $('#btnPost').on('click', function(){
      console.log('點(diǎn)擊post請(qǐng)求')
      $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:3000/api/post',
        data: {
          name: 'lbj',
          number: 23
        },
        success: (res) =>{
          console.log(res, 'get請(qǐng)求成功')
        }
      })
    })
  </script>
</body>
</html>

常見的解決跨域請(qǐng)求的方法

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

CORS的核心原理

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

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

CORS實(shí)現(xiàn)方法

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

CORS的優(yōu)缺點(diǎn)

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

jsonp的實(shí)現(xiàn)方法

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

jsonp的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：
兼容性：JSONP在舊版本瀏覽器中也被廣泛支持。
簡(jiǎn)單易用：實(shí)現(xiàn)起來相對(duì)簡(jiǎn)單，不需要額外的中間件或配置。缺點(diǎn)：
安全性：JSONP存在安全風(fēng)險(xiǎn)，因?yàn)樗试S跨域執(zhí)行腳本。
局限性：只支持GET請(qǐng)求，不支持POST等其他HTTP方法。

jsonp的實(shí)現(xiàn)

<button id="btnJsonp">jsonp請(qǐng)求</button>

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

代理服務(wù)器

實(shí)現(xiàn)方式：代理服務(wù)器充當(dāng)客戶端和目標(biāo)服務(wù)器之間的中介?？蛻舳讼虼矸?wù)器發(fā)起請(qǐng)求，代理服務(wù)器再將請(qǐng)求轉(zhuǎn)發(fā)給目標(biāo)服務(wù)器，并將響應(yīng)返回給客戶端。通過這種方式，可以繞過瀏覽器的同源策略。

優(yōu)點(diǎn)：
靈活性：可以處理各種跨域請(qǐng)求，包括POST等HTTP方法。
安全性：可以通過代理服務(wù)器進(jìn)行身份驗(yàn)證和授權(quán)。
缺點(diǎn)：
實(shí)現(xiàn)復(fù)雜性：需要設(shè)置和維護(hù)代理服務(wù)器。
性能影響：代理服務(wù)器可能會(huì)增加請(qǐng)求延遲和帶寬消耗。

Nginx反向代理

實(shí)現(xiàn)方式：通過Nginx配置反向代理，將跨域請(qǐng)求轉(zhuǎn)發(fā)到Node.js應(yīng)用。

優(yōu)點(diǎn)：
性能：Nginx是一個(gè)高性能的HTTP服務(wù)器和反向代理服務(wù)器。
安全性：可以通過Nginx進(jìn)行SSL/TLS加密和身份驗(yàn)證。
缺點(diǎn)：
配置復(fù)雜性：需要熟悉Nginx的配置和管理。
依賴性：需要額外的Nginx服務(wù)器。

到此這篇關(guān)于node.js中跨域請(qǐng)求有幾種實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)node.js跨域請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: