react中通过proxy配置代理解决跨域问题

蔚落 2021-09-17 10:20 545阅读 0赞

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

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

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

//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文件，具体代码:

{
      "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
        }
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，545人围观）

还没有评论，来说两句吧...

相关阅读

相关解决跨域问题之配置代理

对于开发者而言，客户端与服务端通讯时出现跨域问题是常见的事，跨域的典型特征就是一次点击两次请求，一次 options 预检请求，通过后再发一次实际的get 或 post 请求，

灰太狼/ 2024年03月27日 18:27/ 0 赞/ 113 阅读

相关 Vite配置Proxy代理解决跨域问题

Vite配置Proxy代理解决跨域问题 1.跨域问题 2.跨域常用解决方案 3.proxy代理的原理 4.Vite中配置代理 4.1.

柔情只为你懂/ 2023年10月11日 22:07/ 0 赞/ 78 阅读

相关 reactjs脚手架配置http-proxy-middleware代理解决跨域问题

reactjs脚手架配置http-proxy-middleware代理解决跨域问题 ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_s

深碍√TFBOYSˉ_/ 2023年10月01日 17:09/ 0 赞/ 15 阅读

相关 vue 前端通过代理解决跨域问题

前后端分离进行项目开发，跨域问题不可避免，解决方式有多种，可以后端解决，也可以前端解决，本文介绍前端如何解决跨域问题 vue前端解决跨域问题，可以通过 webpack的

淡淡的烟草味﹌/ 2023年07月17日 14:19/ 0 赞/ 21 阅读

相关 proxy代理解决跨域

vue项目中设置代理 1,config\\index.js下的dev下的proxyTable属性 proxyTable: { '/look'

客官°小女子只卖身不卖艺/ 2023年07月17日 07:00/ 0 赞/ 27 阅读

相关 Vue中使用proxy配置代理解决跨域问题

1、需求说明在前后端分离开发中，前端发送ajax请求因为受到了浏览器同源策略的限制，会出现跨域的问题，在Vue项目中使用代理请求解决跨域问题。如果使用vue/cl

喜欢ヅ旅行/ 2023年01月15日 05:59/ 0 赞/ 159 阅读

相关通过配置代理解决跨域

> Do everything you can right now, and then decide. > 全力以赴，历而后择。背景： > 项目请求后端本地loc

╰+攻爆jí腚メ/ 2022年08月30日 14:57/ 0 赞/ 261 阅读

相关 React代理请求解决跨域问题

假设下面的常量存放的地址是我们请求的地址 const endPointURI = ‘[https://08ad1pao69.execute-api.us-east-1.am

绝地灬酷狼/ 2022年04月24日 16:30/ 0 赞/ 349 阅读

相关 react中通过proxy配置代理解决跨域问题

一，对于使用creat-react-app构建的项目，可以直接在package.json下配置，具体如下 "proxy": "http://api.xxxx.com"

蔚落/ 2021年09月17日 10:20/ 0 赞/ 546 阅读

相关 react 配置代理服务器解决跨域

1、在package.json中添加 "proxy":"http://127.0.0.1:4000" 2、请求url时 axi

古城微笑少年丶/ 2021年07月25日 02:22/ 0 赞/ 539 阅读