Next.js中使用axios请求自定义ngrok接口无法获取数据

你的代码和配置存在几个直接导致请求失败的问题，逐一修复即可：

• 导入语句位置错误：import axios from 'axios'写在文件末尾，违反ES Module规范，运行时会直接抛出axios is not defined错误，请求逻辑根本不会执行。所有import语句必须放在文件最顶部。
• ngrok默认拦截：免费版ngrok默认对陌生请求展示风险提示页，不会把请求转发到你本地的后端服务，必须先过掉这个拦截才能正常访问接口。
• 跨域未配置：本地后端服务没有配置CORS规则的话，浏览器会直接拦截来自Next.js开发服务（默认地址http://localhost:3000）的跨域请求。
• 无错误捕获：原代码只写了请求成功的回调，没有异常捕获，控制台不会打印具体报错，根本没法定位问题。
• 列表渲染缺少key属性：map渲染列表项没加key，React会抛警告，虽然不直接阻塞请求，但属于基础写法问题。

修复后完整代码 #

把components/Trending.js的内容替换成下面的代码：

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

class Trending extends React.Component {
  state = {
    trending: [],
    loading: true,
    errorMsg: ''
  }

  componentDidMount() {
    axios.get('https://90d9-2405-201-5002-215b-6c7b-1f41-7a19-f145.in.ngrok.io/serges/api/blogs')
      .then(res => {
        this.setState({
          trending: res.data,
          loading: false
        })
      })
      .catch(err => {
        console.error('请求失败详情：', err)
        this.setState({
          errorMsg: err.message,
          loading: false
        })
      })
  }

  render() {
    if (this.state.loading) return <div>数据加载中...</div>
    if (this.state.errorMsg) return <div>请求异常：{this.state.errorMsg}</div>

    return (
      <div>
        <table className="table table-hover">
          {this.state.trending.map((post, index) => (
            <tr key={post.id || index}>
              <td>
                <h4>{post.name}</h4>
              </td>
            </tr>
          ))}
        </table>
      </div>
    )
  }
}

export default Trending;

配套配置调整 #

1. 处理ngrok拦截：重启ngrok隧道时执行命令ngrok http 你的后端服务端口 --host-header="localhost:你的后端服务端口"，启动后先在普通浏览器里访问一次你的ngrok地址，点击页面上的「继续访问」按钮过掉安全验证，后续接口请求就能正常转发到本地服务。
2. 配置跨域：给你的本地后端服务添加CORS规则，允许http://localhost:3000来源的请求；如果嫌配置麻烦，也可以在Next.js里配置rewrites规则把接口请求代理到ngrok地址，直接绕开浏览器跨域限制。
3. 排查问题时直接打开浏览器控制台的Network面板，看对应请求的状态码和返回内容：403是ngrok拦截，CORS报错是跨域没配置，500是你本地后端接口本身报错，对着状态调整即可。

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