快捷導(dǎo)航

NodeJS實(shí)現(xiàn)跨域的方法(使用示例)

更新時(shí)間：2024年05月25日 14:40:02 作者：還是大劍師蘭特

CORS是一種 W3C 標(biāo)準(zhǔn),它使用額外的 HTTP 頭來(lái)告訴瀏覽器讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問(wèn)來(lái)自不同源服務(wù)器上的指定的資源,這篇文章主要介紹了NodeJS實(shí)現(xiàn)跨域的方法,需要的朋友可以參考下

方法一，直接在入口文件如 server.js中填寫(xiě)

//引用express 
    const express = require('express') 
    //設(shè)置實(shí)例，調(diào)用express方法 
    const app = express()    
    //設(shè)置跨域 
    app.all("*",(req,res,next)=>{ 
        res.header("Access-Control-Allow-Origin","*") 
        res.header("Access-Control-Allow-Headers","Content-Type") 
        res.header("Access-Control-Allow-Methods","*") 
        res.header('Content-Type','application/json;charset=utf-8') 
        next() 
    })

方法二，使用中間件cors

CORS 是一種 W3C 標(biāo)準(zhǔn)，它使用額外的 HTTP 頭來(lái)告訴瀏覽器讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問(wèn)來(lái)自不同源服務(wù)器上的指定的資源。在 Node.js 中，可以使用 cors 這個(gè) npm 包來(lái)簡(jiǎn)化 CORS 的配置。

安裝cors

npm install cors

使用示例

var express = require('express') 
var cors = require('cors') 
var app = express() 
app.use(cors())  
app.get('/products/:id', function (req, res, next) { 
  res.json({msg: '這對(duì)所有來(lái)源都啟用了 CORS！'}) 
})   
app.listen(80, function () { 
  console.log('CORS-enabled web server listening on port 80') 
})

單個(gè)路由配置 CORS

var express = require('express') 
var cors = require('cors') 
var app = express() 
var corsOptions = { 
  origin: 'http://example.com', 
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
} 
app.get('/products/:id', cors(corsOptions), function (req, res, next) { 
  res.json({msg: 'This is CORS-enabled for only example.com.'}) 
}) 
app.listen(80, function () { 
  console.log('CORS-enabled web server listening on port 80') 
})

動(dòng)態(tài)來(lái)源配置 CORS

var express = require('express') 
var cors = require('cors') 
var app = express() 
var whitelist = ['http://example1.com', 'http://example2.com'] 
var corsOptions = { 
  origin: function (origin, callback) { 
    if (whitelist.indexOf(origin) !== -1) { 
      callback(null, true) 
    } else { 
      callback(new Error('Not allowed by CORS')) 
    } 
  } 
} 
app.get('/products/:id', cors(corsOptions), function (req, res, next) { 
  res.json({msg: 'This is CORS-enabled for a whitelisted domain.'}) 
}) 
app.listen(80, function () { 
  console.log('CORS-enabled web server listening on port 80') 
})

三、使用 JSONP (僅限 GET 請(qǐng)求)

JSONP 是一種非官方的跨域數(shù)據(jù)交互協(xié)議，利用 <script> 標(biāo)簽沒(méi)有跨域限制的特點(diǎn)來(lái)實(shí)現(xiàn)跨域通信。但請(qǐng)注意，JSONP 只能用于 GET 請(qǐng)求，并且存在安全風(fēng)險(xiǎn)。

示例：

app.get('/jsonp', (req, res) => {
  const callback = req.query.callback;
  const data = { message: 'Hello, this is JSONP response' };
  res.type('text/javascript');
  res.send(`${callback}(${JSON.stringify(data)})`);
});

四、代理服務(wù)器

在開(kāi)發(fā)環(huán)境中，有時(shí)候會(huì)使用代理服務(wù)器來(lái)轉(zhuǎn)發(fā)請(qǐng)求，避免直接對(duì) API 服務(wù)器進(jìn)行跨域請(qǐng)求。可以使用 http-proxy-middleware 或 Express 的 proxy 中間件。

綜上，CORS 是最常用的跨域解決方案，因?yàn)樗葮?biāo)準(zhǔn)又靈活，支持各種HTTP方法和自定義頭部。其他方法如 JSONP 和代理服務(wù)器則根據(jù)具體場(chǎng)景選擇使用。

到此這篇關(guān)于NodeJS實(shí)現(xiàn)跨域的方法的文章就介紹到這了,更多相關(guān)NodeJS跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: