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

蔚落 2021-09-17 10:20 497阅读 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 条评论，497人围观）

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

相关阅读

相关 vue3配置proxy解决跨域

域问题是前端开发中较常见的问题，因为javascript的浏览器会支持同源策略，如果域名、协议、端口任意不同就会产生跨域，如果非同源，那么在请求数据时，浏览器会在控制台中...

妖狐艹你老母/ 2024年04月20日 08:15/ 0 赞/ 32 阅读

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

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

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

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

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

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

相关 Vue配置反向代理解决跨域问题

开发问题描述：由于前后端分离的问题，因为在本地测试，存在前后盾地址不一致的问题，因此首先必须了解什么是跨域问题，其次在给出相应的解决方案，在这里主要是给出前端是如何解决跨域问题

我不是女神ヾ/ 2023年09月26日 09:13/ 0 赞/ 105 阅读

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

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

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

相关 nginx 前端代理配置解决跨域问题

前端配置代理（解决跨域问题） server { listen 80; server_name www.xxxx.

谁借莪１个温暖的怀抱￠/ 2022年12月12日 13:51/ 0 赞/ 144 阅读

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

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

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

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

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

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

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

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

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

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

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

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