将标头发送到客户端axios next.js后无法设置标头

Question

与GitHub相同的问题-https://github.com/axios/axios/issues/2743

我的Next.js项目中有Axios，有时在返回Promise.reject时由于拦截器而出现错误。

错误：将标头发送到客户端后，无法设置标头。

我在getInitialProps中提出请求时遇到此问题。当我重新启动PC并再次打开页面时，这种情况很少发生。

Axios实例：

const instance = axios.create({
  baseURL: 'https://my-api.com',
  withCredentials: true,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
  },
})

instance.interceptors.response.use(undefined, error => {
  if (error.response.status === 401) {
    console.log("UNAUTHORIZED")
  }
  return Promise.reject(error) // <-- this cause the problem
})

Next.js页面示例：

const Index = ({myData}) => {
  return data.map(...)
}

Index.getInitialProps = async ({req}) => {
  let myData

  try {
    const res = await API.get('/my-request', {
      headers: req ? { cookie: req.headers.cookie } : undefined, //setting cookie
    })
    myData = res.data
  } catch (e) {}

  return {myData}
}

Answer 1

当我将Axios 0.19.0升级到0.19.2时，这个问题消失了。