我有一个react应用程序，它正在通过axios对我的后端进行API调用，我收到错误
[HPM] Error occurred while proxying request matt.hearthdisplay.com:3000/api/user/my to http://localhost:8000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
我甚至没有在我的package.json中调用proxy，所以我不确定它为什么要尝试这样做？就上下文而言，API GET请求在我同事的机器上使用相同的代码，我最近搬到了一个使用不同wifi路由器的新位置，所以我不确定这是否是计算机特定的问题。
matt.hearthdisplay.com:3000/api/user/my是我的前端react应用程序，http://localhost:8000/是我的后端应用程序。
是什么原因造成的？我在一台运行MacOSMontery12.3的MacbookM1上。下面是我的文件，应该会有所帮助。我在网上找到的东西都试过了。。。
API请求产生错误
useEffect(() => {
async function inner() {
const response = await axiosClient.get(`/user/my`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.status === 200) {
setFormState({
firstName: response.data.user.first_name,
lastName: response.data.user.last_name,
});
}
}
if (!!token) {
inner();
}
}, [token]);
axiosCLient.ts
import axios, { AxiosResponse } from "axios";
import { apiRoot } from "./variables";
const axiosClient = axios.create({
baseURL: apiRoot,
});
// Timeout in 3 seconds by default
axiosClient.defaults.timeout = 3000;
function handle2xxResponse(response: AxiosResponse<any>): AxiosResponse<any> {
return response;
}
axiosClient.interceptors.response.use(handle2xxResponse);
export default axiosClient;
软件包.json
{
"name": "webapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@fullhuman/postcss-purgecss": "^4.1.3",
"@mui/icons-material": "^5.2.4",
"@mui/material": "^5.2.4",
"@mui/styled-engine-sc": "^5.1.0",
"@sentry/react": "^6.16.1",
"@sentry/tracing": "^6.16.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-lottie": "^1.2.6",
"axios": "^0.24.0",
"http-proxy-middleware": "^2.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.21.2",
"react-lottie": "^1.2.3",
"react-native-dropdown": "^0.0.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.3.3",
"tailwindcss": "^2.2.19",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1",
"zustand": "^3.6.5"
},
"scripts": {
"build:tailwind": "postcss src/styles/index.tailwind.css -o src/styles/index.css",
"watch:tailwind": "postcss -w src/styles/index.tailwind.css -o src/styles/index.css",
"start": "run-p watch:tailwind start:react",
"start:react": "react-scripts start",
"prebuild": "npm run build:tailwind",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.4",
"postcss-cli": "^9.0.2"
}
}
setUpProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "http://localhost:8000",
changeOrigin: true,
secure: false,
})
);
};
尝试在代理代码中添加以下标头；
target: "http://localhost:8000",
headers: {
"Connection": "keep-alive"
},
...
Keep Alive常规标头允许发送方提示如何使用连接来设置超时和最大请求量。