前端请求本地Node.js API的GitHub授权接口时遭遇CORS错误求助

问题根源 #

你添加的mode: "no-cors"是错误操作——这个模式下浏览器会完全限制你访问响应内容，哪怕请求实际发送成功，response.ok也会返回false，而且你拿不到任何响应数据，这根本不是解决CORS的正确思路。

正确解决步骤 #

1. 移除fetch中的mode: "no-cors" #

先修改前端请求代码，删掉这个无效配置，让fetch用默认的cors模式：

async function createCart() {
  try {
    const response = await fetch("http://localhost:8080/auth/github", {
      method: "GET",
    });

    console.log(response.ok);
  } catch (error) {
    console.error("Authentication Error", error);
  }
}

2. 正确配置后端CORS中间件 #

你已经装了cors包，但得确保配置正确，让后端允许前端的跨域请求：

首先确认依赖安装没问题：

npm install cors

然后在你的Express（假设用Express框架）API里这么配置：

const express = require('express');
const cors = require('cors');
const app = express();

// 配置允许的前端源，替换成你实际的前端地址（比如http://localhost:3000）
const corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true, // 如果需要携带认证cookie，必须开这个
  optionsSuccessStatus: 200 // 兼容旧版浏览器
};

// 全局启用CORS，所有路由都生效
app.use(cors(corsOptions));

// 也可以只给/auth/github单独配置CORS
// app.get('/auth/github', cors(corsOptions), (req, res) => {
//   // 你的认证逻辑
// });

app.listen(8080, () => {
  console.log('Server running on port 8080');
});

3. 针对Github认证端点的特殊处理 #

如果/auth/github是用来发起Github OAuth登录的，其实没必要用fetch请求——OAuth流程需要浏览器跳转到Github的登录页面，直接用页面跳转更简单，还不会有CORS问题：

function createCart() {
  window.location.href = "http://localhost:8080/auth/github";
}

验证步骤 #

1. 重启你的Node.js服务器，确保CORS配置生效
2. 运行前端代码，发起请求，检查控制台是否还有CORS错误
3. 如果是OAuth场景，直接用跳转方式更稳妥

内容的提问来源于stack exchange，提问作者Arni Fuentes