node.js express cors解決跨域的示例代碼
什么是跨域
跨域（Cross-Origin）是指在 Web 開發(fā)中，當(dāng)一個(gè)網(wǎng)頁的源（Origin）與另一個(gè)網(wǎng)頁的源不同時(shí)，就發(fā)生了跨域。同源策略（Same-Origin Policy）是瀏覽器的一項(xiàng)安全策略，限制了一個(gè)源下的文檔或腳本如何能與另一個(gè)源下的資源進(jìn)行交互。
同源是指兩個(gè) URL 具有相同的協(xié)議（http/https）、主機(jī)（domain）和端口（port）。如果這兩個(gè)URL的這三個(gè)部分中任何一個(gè)不同，就被認(rèn)為是不同源即跨域。
示例
開啟一個(gè)node服務(wù)，服務(wù)地址為http://127.0.0.1:3000
postman請(qǐng)求
postman對(duì)服務(wù)發(fā)起post登錄請(qǐng)求
請(qǐng)求成功。postman不受跨域影響，原因主要是因?yàn)閜ostman是一個(gè)獨(dú)立的桌面應(yīng)用程序，而不是運(yùn)行在瀏覽器中的 Web 應(yīng)用。
前端請(qǐng)求
開啟一個(gè)前端項(xiàng)目服務(wù)，比如vue
發(fā)起登錄請(qǐng)求
<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>
瀏覽器跨域報(bào)錯(cuò)
cors中間件解決跨域
流程
1、安裝cors依賴
npm i cors
2、引入依賴
const cors = require('cors');3、注冊(cè)中間件
全局注冊(cè)cors中間件
app.use(cors());
或?yàn)槟硞€(gè)路由注冊(cè)cors中間件
router.post('/path', cors(), controller);vue服務(wù)進(jìn)行post請(qǐng)求
請(qǐng)求成功，看到響應(yīng)頭Access-Control-Allow-Origin為*， 為cors的默認(rèn)設(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
實(shí)現(xiàn)一個(gè)完整的Node.js RESTful API的示例
本篇文章主要介紹了實(shí)現(xiàn)一個(gè)完整的Node.js RESTful API的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
提到Node.js開發(fā)，不得不提目前炙手可熱的2大框架express和koa。Express誕生已有時(shí)日，是一個(gè)簡潔而靈活的web開發(fā)框架，使用簡單而功能強(qiáng)大。Koa相對(duì)更為年輕，是Express框架原班人馬基于ES6新特性重新開發(fā)的敏捷開發(fā)框架，現(xiàn)在可謂風(fēng)頭正勁，大有趕超Express之勢(shì)。2018-02-02
本文給大家分享的是使用node.js制作一個(gè)簡單的登錄攔截的思路及代碼,有需要的小伙伴可以參考下2020-02-02
使用Express處理請(qǐng)求和托管靜態(tài)資源方式
這篇文章主要介紹了使用Express處理請(qǐng)求和托管靜態(tài)資源方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
使用Nodejs編寫一個(gè)腳本實(shí)現(xiàn)markdown轉(zhuǎn)pdf功能
Markdown?是一種輕量級(jí)的標(biāo)記語言,非常適合用來寫作和記錄,將?Markdown?轉(zhuǎn)換為?PDF?可以讓文檔在格式和樣式上更加統(tǒng)一,也方便在不同設(shè)備和平臺(tái)上查看和打印,在接下來的內(nèi)容中我們將講解如何使用?NodeJs?編寫一個(gè)?Markdown?轉(zhuǎn)?PDF?的腳本來實(shí)現(xiàn)我們這個(gè)想要的功能2024-05-05
在Node.js中，同步和異步編程是兩種不同的處理方式。同步方式會(huì)阻塞程序的執(zhí)行，而異步方式則不會(huì)。通過掌握它們的區(qū)別和使用方法，可以更好地實(shí)現(xiàn)程序的性能優(yōu)化和功能擴(kuò)展。同時(shí)，需要注意異步編程中的回調(diào)地獄問題，使用Promise可以更好地處理異步編程2023-05-05
通過nodejs 服務(wù)器讀取HTML文件渲染到頁面的方法
今天小編就為大家分享一篇通過nodejs 服務(wù)器讀取HTML文件渲染到頁面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-05-05
node.js?使用process.argv獲取和處理命令行參數(shù)的操作
process.argv是Node.js中用于獲取命令行參數(shù)的數(shù)組,基本使用方法是通過命令行傳遞參數(shù)并在腳本中訪問這些參數(shù),參數(shù)可以根據(jù)需求進(jìn)行處理,也可以使用第三方庫如minimist或yargs來簡化參數(shù)解析,這些工具可以幫助開發(fā)者有效地管理和使用命令行參數(shù),提高腳本的靈活性和功能性2024-10-10
node.js+jQuery實(shí)現(xiàn)用戶登錄注冊(cè)AJAX交互
本篇文章主要介紹了用Node.js當(dāng)作后臺(tái)、jQuery寫前臺(tái)AJAX代碼實(shí)現(xiàn)用戶登錄和注冊(cè)的功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
Node.js實(shí)現(xiàn)爬取網(wǎng)站圖片的示例代碼
本文將利用Node.js開發(fā)一個(gè)小示例—爬取某圖片網(wǎng)站的圖片，文中涉及的知識(shí)點(diǎn)有https模塊、cheerio模塊、fs模塊和閉包，感興趣的可以了解一下2022-04-04