首页 > 解决方案 > 如何在 create-react-app 的 package.json 文件中定义 PROXY?

问题描述

我在Azure上托管了前端,在Heroku上托管了后端。当我调用 API 时,代理不起作用。我已经尝试了多次,但它不起作用。

我已经创建了前端react.js和后端node.js,数据库是MongoDB.

包.json

  {
    "name": "yoke",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "axios": "^0.18.0",
      "bootstrap": "^4.3.1",
      "config": "^3.1.0",
      "history": "^4.9.0",
      "jquery": "^3.4.1",
      "jwt-decode": "^2.2.0",
      "moment": "^2.24.0",
      "popper.js": "^1.15.0",
      "react": "^16.8.6",
      "react-bootstrap": "^1.0.0-beta.8",
      "react-dom": "^16.8.6",
      "react-router-dom": "^5.0.0",
      "react-scripts": "3.0.1",
      "serve": "^11.0.2"
    },
    "proxy": "https://fierce-reef-74150.herokuapp.com",
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "homepage": "http://www.sanganan.com/",
    "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }

我的 API 调用代码是:

  export const login = user => {
    return axios
      .post("/newlogin", {
        phone: user.phone,
        pass: user.password
      })
      .then(res => {
        localStorage.setItem("usertoken", res.data);
        return res.data;
      })
      .catch(err => {
        console.log(err);
      });
  };

我在文件中定义的代理package.json应该可以工作,但它不能工作。我收到此错误。

Error: Request failed with status code 404
    at e.exports (createError.js:17)
    at e.exports (settle.js:19)
    at XMLHttpRequest.d.onreadystatechange (xhr.js:60)

标签: node.jsreactjsazureherokucreate-react-app

解决方案


推荐阅读