create-react-app 构建的项目使用代理 proxy 解决跨域请求
1. 正常运行 npm run eject 暴露项目的配置文件 (前三个步骤可省略,最好的是按照第四步操作)
在config/webpackDevServer.config文件下,大概在104行
1 proxy: { 2 '/api': { 3 target: 'https://i.news.qq.com/trpc.qqnews_web.pc_base_srv.base_http_proxy', 4 changeOrigin: true, 5 pathRewrite: { 6 '^/api': '' 7 } 8 } 9 }
2. create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置(我现在是3的版本), 配置成如下:
1 "proxy":{ 2 "/fans/**":{ 3 "target":"https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/", 4 "changeOrigin": true 5 } 6 }
3. create-react-app 的版本高于 2.0 版本的时候在 package.json 只能配置 string 类型, 配置成如下:
1 "proxy": "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
4. 更好的配置,建立 src/setupProxy.js 文件,npm 安装 install http-proxy-middleware , 配置成如下:(可配置多个代理)
1 const proxy = require("http-proxy-middleware"); 2 3 module.exports = function(app) { 4 app.use( 5 proxy("/base/**", { 6 target: "http://45.32.15.21:8090/", 7 changeOrigin: true 8 }) 9 ); 10 app.use( 11 proxy("/fans/**", { 12 target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/", 13 changeOrigin: true 14 }) 15 ); 16 };