　　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配置本地代理的些许方法。如有疏漏，欢迎探讨

转载于:https://www.cnblogs.com/gitByLegend/p/11399945.html

react和vue配置本地代理相关推荐

vue如何配置服务器端跨域_vue项目里如何配置本地代理实现跨域请求
1.在如图项目配置的index.js文件夹下添加以下一段话微信图片_20180912182204.png proxyTable: { '/rest': { target: 'http://192.1 ...
vue配置api代理详解与使用方法
创建的vue框架中,在自动生成的config目录下dev.env.js 'use strict' const merge = require('webpack-merge') const prodEn ...
vue配置多代理服务接口地址
vue配置多代理接口地址一.介绍随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以 ...
Vue Nginx反向代理配置解决生产环境跨域
Vue本地代理举例: module.exports = {publicPath: './',devServer: {proxy: {'/api': {target: 'https://movie.do ...
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource Vue配置代理解决跨域问题
前言在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据. 如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处 ...
vue.config.js配置proxy代理解决跨越；proxy代理报404；
像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题. 本文我们是在v ...
vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
Charles学习（三）之使用Map local代理本地静态资源以及配置网页代理在Mac模拟器调试iOS客户端...
前言问题一:我们在App内嵌H5开发的过程中,肯定会遇到一个问题就是我不想在chrome的控制台中调试,我想要在手机上调试,那么如何解决这个问题呢? 问题二:我们期待调试时达到的效果就是和Charl ...
本地搭建K8s环境，并配置Ingress代理（1）
书接上文,上回说到了在Linux系统搭建K8s环境,通过脚本一键处理,具体可参考<入门K8s:一键脚本搭建Linux服务器集群>. 虽然Linux系统很不错,而且也推荐都买一个做练习,但是 ...

react和vue配置本地代理

React

Vue

react和vue配置本地代理相关推荐

最新文章

热门文章