快捷導(dǎo)航

Node.js基于cors解決接口跨域的問題(推薦)

更新時間：2022年08月09日 09:40:45 作者：蘇涼.py

這篇文章主要介紹了Node.js基于cors解決接口跨域的問題,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

解決問題

使用express編寫get/post接口

const express = require("express");
const apiRouter = express.Router();

apiRouter.get("/get",(req,res)=>{
    let query = req.query;
    res.send({
        status:0,
        method:"GET",
        data:query
    })
})

apiRouter.post("/post",(req,res)=>{
    let body = req.body;
    res.send({
        status:0,
        method:"post",
        data:body
    })
})
module.exports = apiRouter;

構(gòu)造服務(wù)器并將接口寫入

const express = require('express');
const app = express();

app.use(express.urlencoded({extended:false}))
app.use(express.json())


const getRouter = require("./26.編寫接口get，post");
app.use('/api',getRouter); 

const postRouter = require("./26.編寫接口get，post");
app.use("/api",postRouter);


app.listen('8081',function(){
    console.log("http://127.0.0.1:8081");
})

在html頁面中發(fā)起get/post請求：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <button id="get">GET請求</button>
    <button id="post">POST請求</button>
</body>
<script>

    $(function(){
        $("#get").on("click",function(){
        $.ajax({
            url:"127.0.0.1:8081/api/get",
            type:"get",
            data:{
                name:'suliang',
                age:21
            },
            success:function(res){
                console.log(res);
            }
        })
    })
    $("#post").on("click",function(){
        $.ajax({
            url:"127.0.0.1:8081/api/post",
            type:"get",
            data:{
                name:'蘇涼',
                age:21
            },
            success:function(res){
                console.log(res);
            }
        })
    })
    })
    
</script>
</html>

存在跨域問題：

如圖不能正常訪問到

在這里插入圖片描述

接口的跨域問題

剛才編寫的GET和POST接口，存在一個很嚴(yán)重的問題:不支持跨域請求。
解決接口跨域問題的方案主要有兩種:

CORS(主流的解決方案，推薦使用)
JSONP(有缺陷的解決方案:只支持GET請求)

使用cors中間件解決跨域問題

cors 是 Express的一個第三方中間件。通過安裝和配置cors中間件，可以很方便地解決跨域問題。使用步驟分為如下3步:

運行npm install cors安裝中間件

在這里插入圖片描述

使用const cors = require('cors')導(dǎo)入中間件
路由之前調(diào)用app.use(cors())配置中間件

在這里插入圖片描述

const express = require('express');
const app = express();

const cors = require("cors");
app.use(cors());

app.use(express.urlencoded({extended:false}))
app.use(express.json())


const getRouter = require("./26.編寫接口get，post");
app.use('/api',getRouter); 

const postRouter = require("./26.編寫接口get，post");
app.use("/api",postRouter);


app.listen('8081',function(){
    console.log("http://127.0.0.1:8081");
})

在終端啟動服務(wù)器：

在這里插入圖片描述

再次打開html訪問即可：

在這里插入圖片描述

了解問題

什么是CORS

CORS (Cross-Origin Resource Sharing，跨域資源共享）由一系列HTTP響應(yīng)頭組成，這些HTTP響應(yīng)頭決定瀏覽器是否阻止前端JS代碼跨域獲取資源。
瀏覽器的同源安全策略默認(rèn)會阻止網(wǎng)頁“跨域”獲取資源。但如果接口服務(wù)器配置了CORS相關(guān)的 HTTP響應(yīng)頭，就可以解除瀏覽器端的跨域訪問限制。

在這里插入圖片描述

CORS的注意事項

CORS主要在服務(wù)器端進(jìn)行配置?？蛻舳藶g覽器無須做任何額外的配置，即可請求開啟了CORS的接口。
CORS在瀏覽器中有兼容性。只有支持XMLHttpRequest Level2的瀏覽器，才能正常訪問開啟了CORS的服務(wù)端接口(例如:IE10+、Chrome4+、FireFox3.5+)。

CORS相關(guān)的三個響應(yīng)頭

CORS響應(yīng)頭部– Access-Control-Allow-Origin

其中，origin參數(shù)的值指定了允許訪問該資源的外域URL。
例如，下面的字段值將只允許來自http://itcast.cn的請求:

res.setHeader("Access-control-Allow-Origin","http://itcast.cn")

如果指定了Access-Control-Allow-Origin字段的值為通配符*，表示允許來自任何域的請求，如:

res.setHeader("Access-control-Allow-Origin","*")

CORS 響應(yīng)頭部- Access-Control-Allow-Headers

默認(rèn)情況下，CORS僅支持客戶端向服務(wù)器發(fā)送如下的9個請求頭:
Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width ,Content-Type(值僅限于text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一)
如果客戶端向服務(wù)器發(fā)送了額外的請求頭信息，則需要在服務(wù)器端，通過Access-Control-Allow-Headers 對額外的請求頭進(jìn)行聲明，否則這次請求會失敗!

如：

//允許客戶端額外向服務(wù)器發(fā)送 Content-Type 請求頭和X-Custom-Header請求頭
//注意:多個請求頭之間使用英文的逗號進(jìn)行分割
res.setHeader( ' Access-Control-Allow-Headers'，'Content-Type，X-Custom-Header')

CORS 響應(yīng)頭部- Access-Control-Allow-Methods

默認(rèn)情況下，CORS僅支持客戶端發(fā)起GET、POST、HEAD請求。
如果客戶端希望通過PUT、DELETE等方式請求服務(wù)器的資源，則需要在服務(wù)器端，通過Access-Control-Alow-Methods來指明實際請求所允許使用的HTTP方法。

//只允許POST、GET、DELETE、HEAD請求方法
res.setHeader('Access-Control-Allow-Methods'，'POST，GET，DELETE，HEAD')
/允許所有的 HTTP請求方法
res.setHeader('Access-Control-Allow-Methods' , '*')

CORS請求的分類

簡單請求

同時滿足以下兩大條件的請求，就屬于簡單請求:請求方式:GET、POST、HEAD三者之一。
HTTP頭部信息不超過以下幾種字段:無自定義頭部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type (只有三個值application/x-www-form-urlencoded、multipart/form-data、text/plain)

預(yù)檢請求

只要符合以下任何一個條件的請求，都需要進(jìn)行預(yù)檢請求:

請求方式為GET、POST、HEAD之外的請求Method類型
請求頭中包含自定義頭部字段
向服務(wù)器發(fā)送了application/json格式的數(shù)據(jù)

在瀏覽器與服務(wù)器正式通信之前，瀏覽器會先發(fā)送OPTION請求進(jìn)行預(yù)檢，以獲知服務(wù)器是否允許該實際請求，所以這一次的OPTION請求稱為“預(yù)檢請求”。服務(wù)器成功響應(yīng)預(yù)檢請求后，才會發(fā)送真正的請求，并且攜帶真實數(shù)據(jù)。