如何处理 Express Node.js 项目中的 CORS 错误？

如果您想在客户端和服务器位于不同 URL 上时在它们之间发出请求，则应该启用 CORS，也称为跨域资源共享。

让我们认为客户端位于http://localhost:5500上，服务器位于http://localhost:5000上。现在，如果您尝试从客户端向服务器发出请求，您将收到一条错误消息，指出该错误被 CORS 策略阻止。

如何启用 CORS？

我们将使用一个 node.js 包 cors 在 express Node.js 项目中启用 CORS。

项目设置和模块安装：

• 第 1 步：创建一个 Node.js 应用程序并使用以下命令将其命名为gfg-cors 。

  mkdir gfg-cors && cd gfg-cors
  npm init 

• 第 2 步：使用以下命令安装依赖模块。

  npm i express cors

• 第三步：在根目录下创建client目录和server.js文件。然后在客户端目录下创建index.html和script.js 。

项目目录：它看起来像这样。

示例：在index.html、script.js和 server.js文件中写下以下代码。

index.html

    
    
    
    gfg-cors
     

  

脚本.js

fetch('http://localhost:5000/gfg-articles')
.then((res) => res.json())
.then((gfg_articles) => console.log(gfg_articles));

服务器.js

// Requiring module
const express = require('express');
const cors = require('cors');
  
// Creating express app object
const app = express();
  
// CORS is enabled for all origins
app.use(cors());
  
// Example api 
app.get('/gfg-articles', 
    (req, res) => res.json('gfg-articles'));
  
// Port Number
const port = 5000;
  
// Server setup
app.listen(port, () => `Server running on port ${port}`);

注意：如果您想允许选定的来源访问您的站点，则需要配置 cors，如下所示。

服务器.js

// Requiring module
const express = require('express');
const cors = require('cors');
  
// Creating express app object
const app = express();
  
// CORS is enabled for the selected origins
let corsOptions = {
    origin: [ 'http://localhost:5500', 'http://localhost:3000' ]
};
  
// Using cors as a middleware
app.get('/gfg-articles',cors(corsOptions),
    (req,res) => res.json('gfg-articles'))
  
// Port number
const port = 5000;
  
// Server setup
app.listen(port, () => `Server running on port ${port}`);

如果您只想允许特定来源访问您的站点，那么corsOptions将如下所示：

let corsOptions = {
    origin: 'http://localhost:5500'
};

运行应用程序的步骤：使用以下命令运行 server.js。

node server.js

输出：打开index.html ，然后在控制台中检查以下输出。