Next.js 13中Axios POST请求自定义Origin头部失效问题求助

为什么前端直接设置Origin无效 #

浏览器出于安全限制，会自动设置请求的Origin头为当前页面的源（也就是你的localhost:3000），前端JavaScript代码无法覆盖这个值——这是同源策略的一部分，Postman这类工具不受浏览器限制，所以能正常设置。

方法一：用Next.js API路由做代理 #

在你的Next.js项目里创建一个代理路由，让服务器帮你转发请求，这样就能自定义Origin头：

1. 在app/api/proxy/route.ts创建文件，写入以下代码：

import axios from 'axios';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const customOrigin = "bookshop.webmanza.com";
  const requestData = await request.json();

  try {
    const response = await axios.post(process.env.NEXT_PUBLIC_API_URL!, requestData, {
      headers: {
        Origin: customOrigin,
        // 可根据需求添加其他请求头
      }
    });

    return NextResponse.json(response.data);
  } catch (error) {
    return NextResponse.json({ error: '请求失败' }, { status: 500 });
  }
}
// 若需要GET请求，复制上述代码修改为GET即可

2. 前端（比如Layout.tsx）调用这个代理路由，而非直接调用目标API：

// 假设你的Layout是客户端组件
'use client';
import axios from 'axios';
import { useEffect } from 'react';

export default function RootLayout({ children }) {
  const fetchData = async () => {
    try {
      const response = await axios.post('/api/proxy', { /* 请求数据 */ });
      console.log(response.data);
    } catch (err) {
      console.error(err);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

方法二：在服务器组件中直接调用API #

Next.js 13的服务器组件（不带'use client'指令）运行在服务器端，不受浏览器限制，可以直接设置Origin头：

修改你的Layout.tsx，确保它是服务器组件（移除'use client'，如果之前添加过），然后直接用Axios调用API：

import axios from 'axios';

const customOrigin = "bookshop.webmanza.com";

export default async function RootLayout({ children }) {
  try {
    const response = await axios.post(process.env.NEXT_PUBLIC_API_URL!, { /* 请求数据 */ }, {
      headers: {
        Origin: customOrigin,
      }
    });
    console.log(response.data);
  } catch (err) {
    console.error(err);
  }

  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

额外注意 #

你代码里设置的"Access-Control-Allow-Origin": "*"是响应头，不是请求头，前端设置这个完全没用，直接删掉即可。

内容的提问来源于stack exchange，提问作者Tanvir Ahammad Chy