本文共 2499 字，大约阅读时间需要 8 分钟。

跨域请求（CORS）配置指南

在开发过程中，跨域请求（CORS，Cross-Origin Resource Sharing）是解决现代网页应用中数据请求问题的重要技术。以下是几种常用的跨域处理方法，帮助你更好地理解和应用。

一、直接配置跨域

在 server.js 中，可以直接配置跨域头部信息，适用于简单的场景。

const express = require('express')const app = express() 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 中间件

在 Node.js 中，cors 是一个强大的工具，支持丰富的配置选项。

安装依赖：

npm install cors

示例使用：

const express = require('express')const cors = require('cors')const app = express() app.use(cors()) app.get('/products/:id', (req, res, next) => {    res.json({        msg: '跨域请求已开启'    })}) app.listen(80, () => {    console.log('CORS 服务器已启动')})

你可以根据需求定制 CORS 配置：

const express = require('express')const cors = require('cors')const app = express() const corsOptions = {    origin: 'http://example.com',    optionsSuccessStatus: 200} app.get('/products/:id', cors(corsOptions), (req, res, next) => {    res.json({        msg: '仅限 example.com 域名跨域访问'    })}) app.listen(80, () => {    console.log('CORS 服务器已启动')})

三、动态域名配置

对于多个需要跨域访问的域名，可以通过动态方式配置。

const express = require('express')const cors = require('cors')const app = express() const whitelist = ['http://example1.com', 'http://example2.com'] const corsOptions = {    origin: (origin, callback) => {        if (whitelist.indexOf(origin) !== -1) {            callback(null, true)        } else {            callback(new Error('跨域请求被拒绝'))        }    }} app.get('/products/:id', cors(corsOptions), (req, res, next) => {    res.json({        msg: '仅限白名单中的域名跨域访问'    })}) app.listen(80, () => {    console.log('CORS 服务器已启动')})

四、JSONP（仅限 GET 请求）

JSONP 是一种非正式的跨域数据传输方法，适用于 GET 请求，但存在一定的安全风险。

app.get('/jsonp', (req, res) => {    const callback = req.query.callback    const data = {        message: '这是一个 JSONP 响应'    }    res.type('text/javascript')    res.send(`${callback}(${JSON.stringify(data)})`)})

五、代理服务器

在开发环境中，你也可以通过代理服务器转发请求，避免直接对目标服务器跨域。

使用 http-proxy-middleware：

const express = require('express')const httpProxy = require('http-proxy-middleware')const app = express() const proxy = httpProxy({    target: 'https://api.example.com',    changeOrigin: true}) app.use('/api', proxy) app.listen(80, () => {    console.log('代理服务器已启动')})

选择合适的跨域解决方案

CORS 是最常用的跨域解决方案，因其支持丰富的配置选项和灵活的使用方式。无论是简单的跨域请求，还是复杂的跨域配置，CORS 都能胜任。根据项目需求，选择合适的跨域解决方案，确保应用的稳定运行。

转载地址：http://fxjfk.baihongyu.com/