工作中,配置多个跨域端口

  1. . 正常来说,工作中,一个前端工作中,只需要配置一个跨域请求就好了,在webpack的devServer.proxy代理中配置一下就行,以后就不需要改动了,但是,你遇到过在一个项目中前端需要访问好多端口号发送请求的时候嘛,肯定很有吧,下面就来讲解一下
  2. 如果公司里面就一两个后端还好点,但是我们这后台太多了,每个人开发的模块都不同,要是遇到了,同时访问两个或者以上的服务器端口时,是不是就不能向上面那个在devServer.proxy中配置一个了,其实很简单,下面就要来介绍一下wepback中proxyTable
  3. 一般情况下配置一个就好了,可以这么写
 proxyTable: {
      '/api': {// '/api':匹配项
        target: 'http://192.168.10.183:8103',// 接口的域名
     // secure: false,// 如果是https接口,需要配置这个参数
        changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
     // pathRewrite: {// 如果接口本身没有/api需要通过pathRewrite来重写了地址
     //   '^api': ''
        // }
          }
    }
  1. 不知道各位大佬的公司是怎么用的这个,我们这里是提前封装好的,封装的方法东西太多了,具体怎么封装的,我在这里也不好拿出来分享了,可以给各位大佬看一下,我们封装后,怎么使用的
const development = {
  frontend: {
    port: WEB_PORT,
    index: path.resolve(__dirname, './client/dist/index.html'),
    assetsRoot: path.resolve(__dirname, './client/dist'),//封装好的文件
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api/aaa': {
        target: 'http:*********',
        changeOrigin: true,
        pathRewrite: {
          '^/api/aaa': '/api'
        }
      },
      '/api/ccc': {
        target: 'http:******',
         changeOrigin: true,
         pathRewrite: {
          '^/api/ccc': '/api'
        }
      },
      '/api/guard': {
        target: 'http://******',
         changeOrigin: true,
         pathRewrite: {
          '^/api/guard': '/api'
        }
      },
      '/api/safm': {
        target: SEND_SMS,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
      '/api/bstar': {
        target: BSTAR_PROXY_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api/bstar': '/api'
        }
      },
      '/api':{
        target:PROXY_API
      }
  
    },
    cssSourceMap: false
  },

上面这些代码不用说,都是在config.js里面的
下面跟给位大佬说说env, 不知道给位大佬怎么用这个env文件的,
在这里插入图片描述

#  NODE_ENV=production
NODE_ENV=development
WEB_PORT=9009



PROXY_API= http://*******
# wangshenzhao
men = http://******
#HAO_GE
#http://********
#yinpin
YIN_PIN= http://*********
#menjin
GUARD_API=http://*******
#shuxing
SHU_XING=http://**********

# 发送短信ip
SEND_SMS = http://**********
# 访问北京的服务接口
BSTAR_PROXY_API = http://*********
  1. 一共是两种写法,第一个直接在config.js中间直接写服务器端口号,另一种是在env里面配置,然在,config.js里面引入一下,向我那样在里面定义一个变量,在引用时直接使用这个变量就行
  2. 具体的详细跨域,大家可以参考一下我的这篇文章,说的挺详细的,方法也挺多的
  3. 跨域文章链接https://blog.csdn.net/Cool_so_cool/article/details/105770046
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值