欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年08月09日 09:40:45   作者：蘇涼.py  
這篇文章主要介紹了Node.js基于cors解決接口跨域的問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

解決問(wèn)題

使用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頁(yè)面中發(fā)起get/post請(qǐng)求：

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請(qǐng)求</button>
    <button id="post">POST請(qǐng)求</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>

存在跨域問(wèn)題：

如圖不能正常訪問(wèn)到

在這里插入圖片描述

接口的跨域問(wèn)題

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

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

使用cors中間件解決跨域問(wèn)題

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

運(yùn)行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");
})

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

在這里插入圖片描述

再次打開(kāi)html訪問(wèn)即可：

在這里插入圖片描述

了解問(wèn)題

什么是CORS

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

在這里插入圖片描述

在這里插入圖片描述

CORS的注意事項(xiàng)

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

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

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

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

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

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

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

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

默認(rèn)情況下，CORS僅支持客戶端向服務(wù)器發(fā)送如下的9個(gè)請(qǐng)求頭:
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ā)送了額外的請(qǐng)求頭信息，則需要在服務(wù)器端，通過(guò)Access-Control-Allow-Headers 對(duì)額外的請(qǐng)求頭進(jìn)行聲明，否則這次請(qǐng)求會(huì)失敗!

如：

//允許客戶端額外向服務(wù)器發(fā)送 Content-Type 請(qǐng)求頭和X-Custom-Header請(qǐng)求頭
//注意:多個(gè)請(qǐng)求頭之間使用英文的逗號(hào)進(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請(qǐng)求。
如果客戶端希望通過(guò)PUT、DELETE等方式請(qǐng)求服務(wù)器的資源，則需要在服務(wù)器端，通過(guò)Access-Control-Alow-Methods來(lái)指明實(shí)際請(qǐng)求所允許使用的HTTP方法。

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

CORS請(qǐng)求的分類

簡(jiǎn)單請(qǐng)求

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

預(yù)檢請(qǐng)求

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

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

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

簡(jiǎn)單請(qǐng)求和預(yù)檢請(qǐng)求的區(qū)別

  • 簡(jiǎn)單請(qǐng)求的特點(diǎn):客戶端與服務(wù)器之間只會(huì)發(fā)生一次請(qǐng)求。
  • 預(yù)檢請(qǐng)求的特點(diǎn)∶客戶端與服務(wù)器之間會(huì)發(fā)生兩次請(qǐng)求，OPTION預(yù)檢請(qǐng)求成功之后，才會(huì)發(fā)起真正的請(qǐng)求。

到此這篇關(guān)于Node.js基于cors解決接口跨域的問(wèn)題的文章就介紹到這了,更多相關(guān)Node.js cors解決接口跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論