NodeJS实现跨域的方法（ 4种 ）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

方法一，直接在入口文件如 server.js中填写

//引用express 
    const express = require('express') 
    //设置实例，调用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

CORS 是一种 W3C 标准，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。在 Node.js 中，可以使用 cors 这个 npm 包来简化 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: '这对所有来源都启用了 CORS！'}) 
})   
app.listen(80, function () { 
  console.log('CORS-enabled web server listening on port 80') 
}) 

单个路由配置 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') 
}) 

动态来源配置 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 请求)

JSONP 是一种非官方的跨域数据交互协议，利用 <script> 标签没有跨域限制的特点来实现跨域通信。但请注意，JSONP 只能用于 GET 请求，并且存在安全风险。

示例：

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)})`);
});

四、代理服务器

在开发环境中，有时候会使用代理服务器来转发请求，避免直接对 API 服务器进行跨域请求。可以使用 http-proxy-middleware 或 Express 的 proxy 中间件。

综上，CORS 是最常用的跨域解决方案，因为它既标准又灵活，支持各种HTTP方法和自定义头部。其他方法如 JSONP 和代理服务器则根据具体场景选择使用。