node.js express cors解決跨域的示例代碼
什么是跨域
跨域（Cross-Origin）是指在 Web 開發(fā)中，當一個網(wǎng)頁的源（Origin）與另一個網(wǎng)頁的源不同時，就發(fā)生了跨域。同源策略（Same-Origin Policy）是瀏覽器的一項安全策略，限制了一個源下的文檔或腳本如何能與另一個源下的資源進行交互。
同源是指兩個 URL 具有相同的協(xié)議（http/https）、主機（domain）和端口（port）。如果這兩個URL的這三個部分中任何一個不同，就被認為是不同源即跨域。
示例
開啟一個node服務(wù)，服務(wù)地址為http://127.0.0.1:3000
postman請求
postman對服務(wù)發(fā)起post登錄請求
請求成功。postman不受跨域影響，原因主要是因為postman是一個獨立的桌面應(yīng)用程序，而不是運行在瀏覽器中的 Web 應(yīng)用。
前端請求
開啟一個前端項目服務(wù)，比如vue
發(fā)起登錄請求
<script setup>
import axios from 'axios'
const authLogin = async () => {
try {
const { data } = await axios.post('http://127.0.0.1:3000/api/v1/users/login', {
"email": "adasdasasda1@qq.com",
"password": "pass1234"
})
} catch (error) {
throw new Error(error)
}
}
</script>
<template>
<main>
<button @click="authLogin">sign</button>
</main>
</template>
瀏覽器跨域報錯
cors中間件解決跨域
流程
1、安裝cors依賴
npm i cors
2、引入依賴
const cors = require('cors');3、注冊中間件
全局注冊cors中間件
app.use(cors());
或為某個路由注冊cors中間件
router.post('/path', cors(), controller);vue服務(wù)進行post請求
請求成功，看到響應(yīng)頭Access-Control-Allow-Origin為*， 為cors的默認設(shè)置
配置cors參數(shù)
const corsOptions = {
origin: 'http://192.168.110.61:5173',
//...
};
app.use(cors(corsOptions));origin： 允許訪問資源的特定源
通過查閱github文檔查看其他配置
GitHub - expressjs/cors: Node.js CORS middleware
用cors中間件配置同以下
app.all("*", (req, res, next) => {
//設(shè)置允許跨域的域名，*代表允許任意域名跨域
res.header("Access-Control-Allow-Origin", "http://192.168.110.61:5173");
})到此這篇關(guān)于node.js express cors解決跨域的示例代碼的文章就介紹到這了,更多相關(guān)express cors跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要對Node.js的特點進行詳細介紹。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
Node.js創(chuàng)建一個Express服務(wù)的方法詳解
這篇文章主要介紹了Node.js創(chuàng)建一個Express服務(wù)的方法,結(jié)合實例形式分析了node.js創(chuàng)建Express服務(wù)的具體步驟、實現(xiàn)方法及相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Node.js 回調(diào)函數(shù)實例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
輕松創(chuàng)建nodejs服務(wù)器（6）：作出響應(yīng)
這篇文章主要介紹了輕松創(chuàng)建nodejs服務(wù)器（6）：作出響應(yīng),我們接著改造服務(wù)器,讓請求處理程序能夠返回一些有意義的信息,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了詳解NODEJS的http實現(xiàn)的技術(shù)過程以及詳細分析，需要的朋友學(xué)習參考下吧。2018-01-01
這篇文章主要為大家介紹了yarn?命令死循環(huán)問題分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了14款NodeJS Web框架推薦,其中大多數(shù)框架都是基于node.js的Express實現(xiàn),需要的朋友可以參考下2014-07-07
session 不用多介紹，使一個http可以對應(yīng)一個終端用戶，需要的朋友可以參考下。2016-06-06
這篇文章主要介紹了node.js中express的中間件basicAuth的使用方法,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了node.js中的fs.write方法使用說明,本文介紹了fs.write的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12