提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  云平台

当前栏目

react 设置代理(proxy) 实现跨域请求

代理React跨域 实现 设置 请求 Proxy
2023-09-27 14:28:54 时间

一，对于使用creat-react-app构建的项目，可以直接在package.json下配置，具体如下

1

"proxy": "http://api.xxxx.com"

或者如果创建多个域，该如何设置proxy,能满足可以调用不同域下的API的需求？代码如下

1

2

3

4

5

6

7

8

9

10

11

//package.json中加入

"proxy": {

  "/api/RoomApi": {

    "target": "http://open.douyucdn.cn",

    "changeOrigin":true

  },

  "/api/v1":{

    "target":"http://capi.douyucdn.cn",

    "changeOrigin":true

  }

}

二，对于antd-pro的项目，需要在package.json的同等目录下添加.roadhogrc文件，具体代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

{

  "entry": "src/index.js",

  "extraBabelPlugins": [

    "transform-runtime",

    "transform-decorators-legacy",

    "transform-class-properties",

    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]

  ],

  "env": {

    "development": {

      "extraBabelPlugins": [

        "dva-hmr"

      ]

    }

  },

  "externals": {

    "g2": "G2",

    "g-cloud": "Cloud",

    "g2-plugin-slider": "G2.Plugin.slider"

  },

  "ignoreMomentLocale": true,

  "theme": "./src/theme.js",

  "proxy": {

    "/api": {

      "target": "http://api.xxxx.com/",

      "changeOrigin": true

    }

  }

}

相关文章