Express+Netlify Functions开发Chrome扩展API遇CORS预请求失败求助

解决方案 #

1. 修正路由匹配错误 #

你的Express路由挂载了前缀/.netlify/functions/api，但客户端请求的是http://localhost:8888/translate，缺少前缀导致OPTIONS请求找不到对应路由，返回405错误。

两种修复方式：

• 修改客户端请求地址为带前缀的路径：

  const response = await fetch("http://localhost:8888/.netlify/functions/api/translate", {
    // ...其他配置
  });
  

• 或根据环境动态设置路由前缀（本地开发去掉前缀，生产环境保留）：

  const basePath = process.env.NODE_ENV === 'development' ? '' : '/.netlify/functions/api';
  app.use(basePath, router);
  

2. 简化CORS处理逻辑 #

当前同时使用cors中间件和netlify.toml的headers配置，容易产生冲突，建议统一用cors中间件处理：

• 移除单独的router.options("/translate", ...)路由，cors中间件会自动处理OPTIONS预请求
• 确保cors中间件在路由挂载前加载，修改后的服务器代码片段：

  app.use(express.json());
  
  // 先加载CORS中间件，再挂载路由
  app.use(
    cors({
      origin: "*",
      methods: ["POST", "OPTIONS"],
      allowedHeaders: ["Content-Type"],
      credentials: false
    })
  );
  
  app.use("/.netlify/functions/api", router);
  

3. 本地开发与生产环境适配 #

为了避免本地和生产环境的路径差异，可在客户端代码中根据环境切换API地址：

// 示例：根据环境变量切换地址
const apiBaseUrl = process.env.NODE_ENV === 'development'
  ? 'http://localhost:8888'
  : 'https://your-netlify-domain-name.netlify.app';

const response = await fetch(`${apiBaseUrl}/.netlify/functions/api/translate`, {
  // ...其他配置
});

4. 验证OPTIONS请求 #

修改完成后，用curl测试OPTIONS请求是否正常：

curl -X OPTIONS http://localhost:8888/.netlify/functions/api/translate \
  -H "Origin: https://ricki-lee.medium.com" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type" \
  -v

检查响应头是否包含以下字段：

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Methods: POST, OPTIONS
• Access-Control-Allow-Headers: Content-Type

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