为什么在构建和部署 React 应用程序后请求 URL 更改？答案

【问题标题】：Why Request URL changes after the react app is built and deployed?为什么在构建和部署 React 应用程序后请求 URL 更改？
【发布时间】：2019-11-25 11:13:43
【问题描述】：

我正在构建一个 react 应用程序（使用 create-react-app），它从使用 django 构建的服务器获取和发布数据。我正在将 axios 用于带有 react.js 的 API 请求。

它在开发模式下运行良好，但是当我构建 react 应用程序并部署到 netlify 时，请求 url 会发生变化。在开发阶段，Chrome 的开发者工具网络显示 Request URL: https://xyz.herokuapp.com/abc/ 但是当我构建应用程序并部署到 netlify 时，它显示 Request URL: https://loving-dijkstra-99eada.netlify.com/xyz.herokuapp.com/abc/ 并且 API 调用失败。 api调用的axios代码为：

axios.get('https:xyz.herokuapp.com/abc/')
       .then((res) => {
         console.log("successfully received the page count", res.data);
       }).catch((err) => {
         console.log(err, 'error  in the get of data');
       });

如何使它工作？ package.json 在这里。

{
  "name": "now-ui-kit-react",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "antd": "^3.25.0",
    "axios": "^0.19.0",
    "moment": "2.24.0",
    "node-sass": "4.12.0",
    "nouislider": "14.0.2",
    "react": "16.8.6",
    "react-bootstrap-switch": "15.5.3",
    "react-datetime": "2.16.3",
    "react-dom": "16.8.6",
    "react-router": "5.0.1",
    "react-router-dom": "5.0.1",
    "react-scripts": "3.0.1",
    "reactstrap": "8.0.1",
    "validator": "^12.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "compile-sass": "node-sass src/assets/scss/now-ui-kit.scss src/assets/css/now-ui-kit.css",
    "minify-sass": "node-sass src/assets/scss/now-ui-kit.scss src/assets/css/now-ui-kit.min.css --output-style compressed",
    "map-sass": "node-sass src/assets/scss/now-ui-kit.scss src/assets/css/now-ui-kit.css --source-map true"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "optionalDependencies": {
    "typescript": "3.5.3"
  }
}

【问题讨论】：

标签： reactjs axios

【解决方案1】：

您在协议中缺少双斜线。

axios.get('https:xyz.herokuapp.com/abc/')

应该是

axios.get('https://xyz.herokuapp.com/abc/')

【讨论】：

【解决方案2】：

尝试将您的服务器文件提取到根文件。在您的情况下，您可能有一个名为 xyz.herokuapp.com 的文件夹，这就是 Axios 错误路径和错误请求的原因...

【讨论】：