zoukankan      html  css  js  c++  java
  • 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 };
  • 相关阅读:
    Python基础:18类和实例之二
    Python基础:17类和实例之一(类属性和实例属性)
    Python基础:16面向对象概述
    Python基础:15私有化
    Python基础:14生成器
    Python基础:13装饰器
    Python基础:12函数细节
    Python基础:11变量作用域和闭包
    gcc需找头文件路径
    监控系统
  • 原文地址:https://www.cnblogs.com/shun1015/p/13747302.html
Copyright © 2011-2022 走看看