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

刺骨的言语ヽ痛彻心扉 2024-05-09 16:29 56阅读 0赞

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

![在这里插入图片描述][4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]

#### 文章目录 ####

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

--------------------

![在这里插入图片描述][a9d51160a02d4d339d7d81830ed4b1c9.png_pic_center]

### 方法一，直接在入口文件如 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 和代理服务器则根据具体场景选择使用。

[4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/582168afab41464c9c4491ff9885b3b6.png
[744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/a264fd73156c4fd3b46225c664111ae5.png
[a9d51160a02d4d339d7d81830ed4b1c9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/4e3f781cbac84a6c825f982162b704cc.png