Node.js基于cors解決接口跨域的問題(推薦)
解決問題
使用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ù)。
簡單請求和預(yù)檢請求的區(qū)別
- 簡單請求的特點:客戶端與服務(wù)器之間只會發(fā)生一次請求。
- 預(yù)檢請求的特點∶客戶端與服務(wù)器之間會發(fā)生兩次請求，OPTION預(yù)檢請求成功之后，才會發(fā)起真正的請求。
到此這篇關(guān)于Node.js基于cors解決接口跨域的問題的文章就介紹到這了,更多相關(guān)Node.js cors解決接口跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了node.js開機自啟動腳本文件的方法和代碼，這里分享給大家，有需要的小伙伴參考下吧2014-12-12
本文主要介紹了node腳本實現(xiàn)自動化簽到和抽獎功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
nodejs中簡單實現(xiàn)Javascript Promise機制的實例
這篇文章主要介紹了nodejs中簡單實現(xiàn)Javascript Promise機制的實例,本文在nodejs中簡單實現(xiàn)一個promise/A 規(guī)范,需要的朋友可以參考下2014-12-12
nodeJS最大的特點就是其異步操作，下面這篇文章主要給大家介紹了關(guān)于NodeJS如何實現(xiàn)同步的方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
Node版本管理器--nvm，可以運行在多種操作系統(tǒng)上。nvm for windows 是使用go語言編寫的軟件。 我電腦使用的是Windows操作系統(tǒng)，所以我要記錄下在此操作系統(tǒng)上nvm的安裝和使用2021-06-06
Ajax獲取node服務(wù)器數(shù)據(jù)的完整步驟
這篇文章主要給大家介紹了關(guān)于Ajax獲取node服務(wù)器數(shù)據(jù)的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了Node.js Addons翻譯(C/C++擴展) 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
本文通過實例代碼給大家介紹了nodejs函數(shù)的調(diào)用,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
Node.js靜態(tài)服務(wù)器的實現(xiàn)方法
這篇文章主要介紹了Node.js靜態(tài)服務(wù)器的實現(xiàn)方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
用node和express連接mysql實現(xiàn)登錄注冊的實現(xiàn)代碼
本篇文章主要介紹了用node和express連接mysql實現(xiàn)登錄注冊的實現(xiàn)代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07