Question

我正在使用create-react-app开发一个ReactJS前端应用程序，我已经设置了代理，并通过与REST API客户端（失眠）进行了测试来确保它可以正常工作。出于某种原因，当从浏览器发出请求时，请求失败，状态码为500，给出的原因是“ Ivalid 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 Creators中，我从前端发出的请求看起来像这样：

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

使用create react应用程序，您可以将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

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

使用create-react-app

2 个答案: