package.json设置proxy不生效

Question

最近要做一个后台权限管理的项目，于是做为github的搬运工，找到了@wjkang 的一个项目叫3YAdmin，现在碰到以下问题，希望各位高手或作者本人协助，先提前谢过了！

项目clone下来后，package.json里设置了proxy，之后比如，前端请求登陆接口时url为/api/auth/login，但是最终不生效（也就是后端没有收到来自前端的请求，这里192.168.99.100是我本地的一个后台接口服务器，/api,/api/*,/api/**都试过了还是不行），npm start后也提示加载了proxy的配置，下面控制台能够看到，请求到了axios配置里的后端地址，而不是192.168.99.100，以下是package.json配置。

{
  "name": "3YAdmin",
  "version": "0.1.0",
  "private": true,
  "homepage": "/3YAdmin-preview/",
  "scripts": {
    "start": "node react-scripts/scripts/start.js",
    "build": "node react-scripts/scripts/build.js",
    "test": "node react-scripts/scripts/test.js --env=jsdom",
    "eject": "node react-scripts/scripts/eject.js"
  },
  "dependencies": {
    "antd": "3.5.3",
    "axios": "^0.18.0",
    "create-react-class": "^15.6.3",
    "qs": "^6.5.2",
    "query-string": "^5.1.1",
    "react": "^16.3.2",
    "react-content-loader": "^3.1.2",
    "react-dom": "^16.3.2",
    "react-loadable": "^5.4.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0"
  },
  "devDependencies": {
    "autodll-webpack-plugin": "^0.3.9",
    "autoprefixer": "7.1.6",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-plugin-import": "^1.7.0",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.7",
    "dotenv": "4.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "4.10.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.4.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "fs-extra": "3.0.1",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "less": "^2.7.2",
    "less-loader": "^4.1.0",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "progress-bar-webpack-plugin": "^1.11.0",
    "promise": "8.0.1",
    "raf": "3.4.0",
    "react-dev-utils": "^5.0.1",
    "react-hot-loader": "^4.3.3",
    "react-scripts": "^1.1.4",
    "resolve": "1.6.0",
    "style-loader": "0.19.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.4",
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },
  "proxy": {
    "/api": {
      "target": "http://192.168.99.100",
      "changeOrigin": true
    }
  }
}

Answer 1

下面控制台能够看到，请求到了axios配置里的后端地址，而不是192.168.99.100

network面板中显示的地址没有错，因为无论加不加proxy，它都要请求你开的前端server地址。前端server接收到这个请求后再根据你的配置进行转发。

"http://192.168.99.100" 不配置端口，默认应该是请求到:80端口的，确认一下你后端的端口是不是80。

如果还不行的话，试试在3YAdmin/react-scripts/scripts/start.js的第110行自己写个proxy配置，看可以不