NextJS中Axios调用API返回HTML而非JSON的问题求助

你遇到的核心问题是Next.js页面路由与rewrite规则冲突：你在/pages/plans.tsx创建了页面组件，同时又在next.config.js中配置/plans路径转发到后端API。Next.js的路由系统会优先匹配页面文件，因此前端请求/plans时，实际返回的是当前Plans页面的HTML，而非后端API的JSON数据。

另外，请求代码里有两个冗余配置：

• GET请求无需传递data: null，可直接移除
• Access-Control-Allow-Origin是后端需设置的响应头，前端请求添加该字段无作用，建议删除

推荐两种解决方式，优先选择第一种（路径区分更清晰，避免后续路由冲突）：

方案1：修改API请求路径，规避页面路由冲突 #

1. 更新next.config.js的rewrite规则 #

将转发路径改为/api/plans，与页面路由/plans明确区分：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/plans',
        destination: `${process.env.BACKEND_URL}/plans`,
      }
    ];
  },
};

2. 调整前端请求路径 #

在plans.tsx中将请求地址改为/api/plans：

import React from 'react';
import axios from 'axios';

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

const Plans = () => {
    async function fetchData() {
        try {
            const response = await axios.get('/api/plans', {
                headers: {
                    Accept: 'application/json',
                }
            });
            const data = response.data;
            console.log(data);

        } catch (error) {
          console.error(error);
        }
    }

    return (
        <button onClick={fetchData}>Buscar Dados</button>
    );
}

export default Plans;

3. 重启Next.js开发服务 #

确保环境变量和rewrite规则生效，需重启你的Next.js服务。

方案2：通过请求头区分页面与API请求（不修改路径） #

如果坚持使用/plans作为API请求路径，可在rewrite规则中添加条件，仅当请求头Accept为application/json时才转发到后端：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/plans',
        destination: `${process.env.BACKEND_URL}/plans`,
        has: [
          {
            type: 'header',
            key: 'Accept',
            value: 'application/json',
          },
        ],
      },
    ];
  },
};

这种方式下，浏览器直接访问/plans会渲染页面，前端代码中带Accept: application/json头的请求会被转发到后端API。

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