Express.js 中 CORS 问题解决指南：告别“xhr 被阻止”错误

解决 Express.js 中的 CORS 问题：告别“xhr 被阻止”错误

简介

跨源资源共享 (CORS) 是一项至关重要的浏览器机制，用于限制不同源之间的 HTTP 请求。在使用 Express.js 开发 Web 应用程序时，必须启用 CORS 以允许跨源请求，否则浏览器会阻止这些请求，从而导致恼人的“xhr 被阻止，CORS 缺少允许来源”错误。

问题场景

想象一下，你正在设置 Facebook 身份验证，但重定向被阻止，并出现“xhr 被阻止，CORS 缺少允许来源”错误。这是因为浏览器不允许来自 Facebook 的跨源请求，除非 Express.js 应用程序明确允许。

解决方案

要解决此问题，需要在 Express.js 中启用 CORS，并指定允许的来源。

步骤 1：安装 CORS 中间件

使用命令行安装 cors 中间件：

npm install cors

步骤 2：启用 CORS

在你的 Express.js 应用程序中，使用 cors 中间件启用 CORS：

const cors = require('cors');

app.use(cors());

步骤 3：配置 CORS 选项

你可以配置 cors() 方法的选项来进一步控制 CORS 行为：

app.use(cors({
  origin: ['https://example.com', 'https://localhost:3000'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

确保正确的 Facebook 回调 URL

还要确保你的 Facebook 重定向 URL 与你在 Facebook 开发者控制台中配置的 URL 匹配。

附加说明

• 禁用任何浏览器扩展程序或广告拦截器，因为它们可能会干扰 CORS 请求。
• 启用 CORS 后，请测试你的身份验证流程是否成功。

结论

通过启用 CORS 并指定允许的来源，你可以解决 Express.js 中的“xhr 被阻止，CORS 缺少允许来源”错误，并实现跨源请求的无缝进行。

常见问题解答

1. 什么是 CORS？
   CORS 是跨源资源共享，用于限制不同来源之间的 HTTP 请求。
2. 为什么我需要在 Express.js 中启用 CORS？
   为了允许跨源请求，例如来自 Facebook 的重定向请求。
3. 如何启用 CORS？
   使用 cors 中间件，并设置适当的选项。
4. 如何配置 CORS 选项？
   可以配置选项，例如允许的来源、方法和标头。
5. 启用 CORS 后还需要做些什么？
   确保 Facebook 重定向 URL 与开发者控制台中的配置相匹配。