使用创建反应应用程序向后端发出请求时 URI 无效

Question

我正在使用create-react-app制作一个ReactJS前端应用程序，我已经设置了我的代理，并通过使用REST API客户端(Insomnia)进行测试来确保它正常工作。出于某种原因，当从浏览器发出请求时，它会失败，状态代码为 500，给出的原因是"无效 URL"。我已经在开发机器上使用不同的浏览器尝试过，删除了node_modules文件夹，用于不同的请求库，甚至重新安装了create-react-app并从头开始创建项目结构，但我似乎无法让它工作。最奇怪的部分是该应用程序在我的笔记本电脑上编写。

我已经像这样设置了我的代理：

const proxy = require ('http-proxy-middleware');
module.exports =function (app){
console.log("Se ejecutó el setupProxy");
app.use(proxy("/register", {target:"http://localhost:3001"}));
app.use(proxy("/auth/local", {target:"http://localhost:3001"}));
app.use(proxy("/api/current_user", {target:"http://localhost:3001"}));
}

我从前端发出的请求，在我的一个 Redux Action Creator 中发出，如下所示：

export function registerUser(userInfo)
{
return async (dispatch) =>
{
/*axios.post("/register",{
display_name: userInfo.username,
password: userInfo.password,
email: userInfo.email,
}).then((resp)=>{
dispatch({type: USER_REGISTRATION, payload:"User Registered"});    
}).catch((error)=>{
dispatch({type: USER_REGISTRATION,payload:error.response.data.message});
});*/
rp.post('/register',{json:true,formData:{
display_name: userInfo.username,
password: userInfo.password,
email: userInfo.email
}}).then((response)=>{
console.log(response);
}).catch((err)=>{
console.log("Error ha ocurrido:");
console.log(err);
});
};
}

请注意，我已经尝试了 axios 和 request.js。Axios 不返回正文，而 Request.js 仅返回状态代码 500 和无效 URL 消息。

我做错了什么？为什么这在一台机器上有效，而在另一台机器上却不起作用？拜托，我对此很机智。如果有人能帮忙，将不胜感激。

Answer 1

使用创建反应应用程序，您可以将proxy属性添加到您的package.json。 无需使用第三方库。

package.json

{
"name": "your-app",
"version": "0.1.0",
"private": true,
"proxy": "localhost:3001", //this is your back end port

更多信息可以在这里找到：https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

Answer 2

我能够通过将我的存储库从头开始克隆到另一个文件夹上并将依赖项再次安装到新副本中来解决此问题。我仍然不知道为什么会发生这种情况，但这解决了它。