react中解决跨域（在开发环境下）

先附上package.json文件

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.20.6",
    "axios": "^0.19.0",
    "babel-plugin-import": "^1.12.0",
    "crypto-js": "^3.1.9-1",
    "echarts": "^4.2.1",
    "http-proxy-middleware": "^0.19.1",
    "qs": "^6.7.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-resizable": "^1.8.0",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack --config config/webpack.dev.conf.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "webpack-dev-server --config config/webpack.dev.conf.js"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.1.0",
    "file-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "react-router-dom": "^5.0.1",
    "style-loader": "^0.23.1",
    "url-loader": "^2.1.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.6",
    "webpack-dev-server": "^3.2.1"
  }
}

第一步 先下载http-proxy-middleware

npm i http-proxy-middleware --save

第二步 创建 src/setupProxy.js

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(proxy('/v1', { target: 'https://www.google.com/' }));  //target是请求接口的根地址    /v1是请求的url地址中的前缀  
//eg：https://www.google.com/v1/count/common/list  完整的接口地址
};

第三步 在webpack.dev.conf.js中的devServer项进行配置 webpack文件是自己配置的 没有暴露create-react-app的eject文件

  devServer: { // 配置webpack-dev-server， 在本地启动一个服务器运行
    host: 'localhost', // 服务器的ip地址 希望服务器外可以访问就设置 0.0.0.0
    port: 8088, // 端口
    open: true, // 自动打开页面
    historyApiFallback: true,
    proxy: {
      "/v1": {
        "target": "https://www.google.com/",
        "changeOrigin": true
        }
    }
  },