zoukankan      html  css  js  c++  java
  • react和vue配置本地代理

      React

      在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可。

      但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的能够代理多个接口的请求方式

    proxy('/back', {
    
      target: 'http://172.20.1.148:8082',
    
      changeOrigin: true
    
    })

      1):安装http-proxy-middleware管理包,npm i http-proxy-middleware --save

      2):在项目目录的src /下新建setupProxy.js文件,然后写入如下代码:

    const proxy = require(‘http-proxy-middleware‘);
    
    module.exports = function(app) {
      app.use(proxy(‘/api‘, { 
           target: ‘http://192.168.1.144:8181‘ ,
           secure: false,
           changeOrigin: true,
           pathRewrite: {
            "^/api": "/"
           },
           // cookieDomainRewrite: "http://localhost:3000"
        }));
    };

      Vue

      vue配置本地代理,在项目根目录创建vue.config.js

    module.exports = {
        devServer: {
            open: true,
    
            https: false,
    
            hotOnly: false,
            proxy: { //设置代理
                '/api': {
                    target: 'http://192.168.000.129',
                    host: '192.168.000.129',
                    changeOrigin: true,
                    pathRewrith: {
                        '^/api': '/'
                    }
                },
                 '/lyg':{
                     target:'http://192.168.000.108:8090/',
                     host:'192.168.000.108',
                     changeOrigin:true,
                     pathRewrith:{
                         '^/lyg':'/'
                     }
                 }
            },
            port:8000,
        },
    }

      以上是vue,react配置本地代理的些许方法。如有疏漏,欢迎探讨

  • 相关阅读:
    iOS 适配iPhoneX上tableHeaderView发生了高度拉伸、UI出现的空白间距
    无线加密WEP、WPA、WPA2及TKIP、AES
    字符替换操作
    jQuery版本升级问题汇总
    ipv6服务器及环境搭建
    git删除某次提交操作
    五种IO模型
    jQuery1.6以上attr改用prop
    线程创建pthread_create用法(转)
    网络字节序与主机字节序
  • 原文地址:https://www.cnblogs.com/gitByLegend/p/11399945.html
Copyright © 2011-2022 走看看