Next.js报错之 Error: connect ECONNREFUSED 127.0.0.1:80 【接口代理】

最新推荐文章于 2024-08-01 15:50:55 发布

原创最新推荐文章于 2024-08-01 15:50:55 发布 · 4.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react #nextjs #node.js

本文介绍了在Next.js应用中遇到`Error: connect ECONNREFUSED 127.0.0.1:80`错误的原因及解决方案。错误源于客户端和服务器端渲染时请求接口的不同处理。在客户端渲染时，请求自动添加了网站域名，而在服务端渲染时则添加了特殊的本地回环地址。解决方法包括创建公共的api.js文件，为不同环境定义请求配置。

Error: connect ECONNREFUSED 127.0.0.1:80

在这里插入图片描述

报错的完整代码

import React from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';

const Index = props => {
    return <div>Index</div>;
};

Index.propTypes = {};

Index.getInitialProps = async () => {
# 请求地址为：/github/search/repositories?q=react
    const response = await axios.get('/github/search/repositories?q=react');
    console.log('response', response);
    return {
        data: response.data,
    };
};

export default Index;

报错原因

发送请求在 客户端渲染 和 服务端渲染 之间存在差异性。

客户端渲染中

以 /github/search/repositories?q=react 为例，在客户端中发送请求会自动添加上当前网站的域名地址，如：http://localhost:3000/github/search/repositories?q=react。

在服务端渲染中

同样以 /github/search/repositories?q=react 为例，在服务端渲染中没有当前网站的域名场景，然而依旧也会自动添加上一个特殊的域名地址：http://127.0.0.1:80，80 端口是浏览器的默认端口，完整的请求路径为：http://127.0.0.1:80/github/search/repositories?q=react，然而我们的服务没有启动在 80 端口上，自然没有得到响应。

解决方法 -> 分别处理客户端渲染和服务端渲染

1. 创建公共的 api.js 文件

创建 api.js 文件，来针对不同环境的不同请求配置对象。

// 处理getInitialProps中发送的请求接口
// 在客户端，服务端中都执行
const axios = require('axios');

const isServer = typeof window === 'undefined';
async function request({ method = 'GET', url, data = {} }, req, res) {
    // url是必传的，没有则报错
    if (!url) {
        throw new Error('url muse provide');
    }
    if (isServer) {
        // 服务端中的请求配置，给ulr加上请求地址前缀
       return await axios({})
    } else {
        // 客户端中请求配置，客户端可不做太多的处理
        return await axios({});
    }
}

module.exports = {
    request,
};

2. Index.jsx中

import React from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
import api from '../lib/api';

const Index = props => {
    return <div>Index</div>;
};

Index.propTypes = {};

Index.getInitialProps = async ({ ctx }) => {
    // api.request()中会自动判断 服务端 还是 客户端，加上自己的需要请求的路径前缀
    const response = await api.request({ url: '/github/search/repositories?q=reactsearch/repositories?q=react' }, ctx.req, ctx.res);
    console.log('response', response);
    return {
        data: response.data,
    };
};

export default Index;