什么是跨域

跨域（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)文章希望大家以后多多支持腳本之家！ 

最新評(píng)論