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

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

文章目录

• • 方法一，直接在入口文件如 server.js中填写
  • 方法二，使用中间件cors
  • • 安装cors
    • 使用示例
    • 单个路由配置 CORS
    • 动态来源配置 CORS
    • 三、使用 JSONP (仅限 GET 请求)
    • 四、代理服务器

      ---

      方法一，直接在入口文件如 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 是一种非官方的跨域数据交互协议，利用 标签没有跨域限制的特点来实现跨域通信。但请注意，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 和代理服务器则根据具体场景选择使用。