Next.js Axios API集成报错：Postman正常但本地请求遭CORS拦截

问题现象 #

Postman 能正常发起请求，但本地 localhost:3000 的前端请求无法到达目标服务器，报错信息如下：

从源'http://localhost:3000'访问'https://0001.uz/myself'的XMLHttpRequest被CORS策略阻止：预检请求的响应未通过访问控制检查：不具备HTTP成功状态。
signup.jsx:39 AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
api.service.js:9

请求失败的控制台日志：

GET https://0001.uz/myself net::ERR_FAILED

相关代码片段 #

API 服务函数（AuthService） #

const AuthService = {
  async getAuth(data) {
    const response = await axios.post("/signup", data);
    return response;
  },
  async getCurrentUser() {
    const response = await axios.get("/myself");
    return response;
  },
};
export default AuthService;

Axios 全局配置文件 #

import axios from "axios";
axios.defaults.baseURL = "https://0001.uz";

axios.interceptors.request.use((config) => {
  config.headers.Key = "Blackmagic";
  config.headers.Secret = "MrBlack";
  config.headers.Sign = "91450883dc60b4d7d63bdb24444cd1bf";
  return config;
});

export default axios;

可行解决方案 #

1. 配置 Next.js 反向代理（推荐生产/开发通用） #

在项目根目录创建或修改 next.config.js，添加路由重写规则实现代理：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://0001.uz/:path*',
      },
    ];
  },
};

module.exports = nextConfig;

之后修改 Axios 配置的 baseURL 为 /api：

axios.defaults.baseURL = "/api";

此方案通过 Next.js 服务器转发请求，规避浏览器的 CORS 限制，同时保持请求逻辑不变。

2. 修复目标 API 的预检请求处理 #

报错核心是OPTIONS 预检请求未返回成功状态码，需要目标 API 服务器做以下调整：

• 允许 http://localhost:3000 作为跨域源，返回 Access-Control-Allow-Origin: http://localhost:3000 响应头
• 确保 OPTIONS 请求能返回 200/204 等成功状态码
• 响应头 Access-Control-Allow-Headers 需包含自定义的 Key、Secret、Sign 字段，否则浏览器会拒绝后续请求

3. 临时禁用浏览器 CORS（仅本地调试用） #

仅用于临时排查问题，禁止生产环境使用：

• Chrome 浏览器：右键快捷方式，在目标栏末尾添加 --disable-web-security --user-data-dir="C:/ChromeDevSession"（注意空格），重启浏览器后即可无 CORS 限制访问
• Edge 浏览器操作逻辑与 Chrome 一致

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