首页 > 移动平台 > 详细

create-react-app 构建的项目使用代理 proxy 解决跨域请求

时间:2020-09-28 23:20:58      阅读:65      评论:0      收藏:0      [点我收藏+]

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 };

 

create-react-app 构建的项目使用代理 proxy 解决跨域请求

原文:https://www.cnblogs.com/shun1015/p/13747302.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!