前端通过Axios请求Ngrok后端API遭遇CORS问题求助

核心问题诊断 #

• 前端请求中添加Access-Control-Allow-Origin完全无效，这个响应头必须由后端返回，浏览器才会认可。
• 服务端渲染（SSR）和Postman能正常请求，是因为它们不受浏览器的CORS同源策略限制，只有浏览器发起的前端请求会触发CORS校验。
• 响应Content-Type为text/html，说明后端可能未正确处理/api/announcements路由，返回了错误页面（如404）而非预期的JSON，这会导致CORS头未被正确设置。

分步解决方案 #

1. 修复后端CORS配置 #

确保后端的CORS中间件正确配置，允许前端域名跨域请求：
如果使用Express的cors包，配置需指定允许的origin：

const cors = require('cors');

// 允许指定前端域名跨域
const corsOptions = {
  origin: 'https://9797-156-220-22-73.ngrok-free.app',
  credentials: true, // 若需携带Cookie/认证信息，开启此项
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'] // 允许的请求方法
};

// 注意：CORS中间件必须放在所有路由定义之前
app.use(cors(corsOptions));

// 调试阶段可临时允许所有origin（生产环境禁用）
// app.use(cors());

2. 修正前端Axios配置 #

删除前端请求中的Access-Control-Allow-Origin头（该头属于响应头，前端无需发送），并确保使用自定义的axios实例发起请求：

import axios from 'axios';

const baseURL = 'https://fe39-156-220-22-73.ngrok-free.app';

const axiosInstance = axios.create({
  baseURL,
  headers: {
    'Content-Type': 'application/json',
    // 移除无效的Access-Control-Allow-Origin头
  },
});

export default axiosInstance;

修改请求函数，使用上述axios实例：

import axiosInstance from './api';

const [announcements, setAnnouncements] = useState()
const [spin, setSpin] = useState(true)

const fetchAnnouncements = async () => {
  try{
      const { data } = await axiosInstance.get('/api/announcements');
      setSpin(false);
      setAnnouncements(data); // 直接使用data，无需data.json（除非后端返回Blob格式）
  }catch(err){
      console.error('请求失败:', err);
      setSpin(false);
  }
}

3. 排查后端路由与响应格式 #

响应Content-Type为text/html通常是以下问题导致，需排查后端代码：

• 路由/api/announcements未正确定义，返回404页面；
• 后端代码报错，返回错误页面而非JSON响应。

确保后端路由正确返回JSON：

// Express示例路由
app.get('/api/announcements', (req, res) => {
  try {
    const announcements = // 从数据库或其他数据源获取数据
    res.setHeader('Content-Type', 'application/json'); // 明确设置响应类型
    res.json(announcements); // 使用res.json返回JSON格式数据
  } catch (err) {
    res.status(500).json({ error: '获取数据失败' }); // 错误时也返回JSON
  }
});

4. Ngrok相关注意事项 #

• 免费版Ngrok域名会频繁变更，确保前后端域名均为最新且无拼写错误；
• 确认Ngrok正确代理了后端服务端口，例如ngrok http 3000（假设后端运行在3000端口）。

验证步骤 #

1. 重启后端服务，确保CORS配置生效；
2. 打开浏览器开发者工具的网络面板：
   • 检查请求的Origin头是否为前端域名；
   • 检查响应头是否包含Access-Control-Allow-Origin，值与前端域名一致；
   • 确认响应的Content-Type为application/json。

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