写代理js文件下面是文件内容

 /**
* Module dependencies.
*/
var browserSync = require('browser-sync').create()
var proxy = require('http-proxy-middleware') // require('http-proxy-middleware'); /**
* Configure proxy middleware
*/ var jsonPlaceholderProxy = proxy('/api', {
target: 'http://127.0.0.1:5000',
changeOrigin: true, // for vhosted sites, changes host header to match to target's host
pathRewrite: {
'^/api': ''
},
logLevel: 'debug'
}) /**
* Add the proxy to browser-sync
*/
browserSync.init({
server: {
baseDir: './',
middleware: [jsonPlaceholderProxy]
},
port: 8080,
startPath: '/'
}) console.log('[DEMO] Server: listening on port 8080')

随后在package.json中配置script字段,npm启动此代理即可,

注意,此处我遇到一个坑,下面参考资料的port:8080写在init函数server选项里面的话,启动出来的端口是一个随机分配的端口

    并不是我们配置的8080口,需要把port选项发到server平级即可启动对应端口

参考资料

https://github.com/chimurai/http-proxy-middleware/blob/master/examples/browser-sync/index.js

browser-sync + http-proxy-middleware 配置代理跨域的更多相关文章

  1. reactjs中配置代理跨域

    第一步,下载依赖 http-proxy-middleware yarn add http-proxy-middleware 第二步,在src下建立setupProxy.js const proxy = ...

  2. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  3. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  4. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  5. Next.js 配置接口跨域代理转发

    使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能. 先安装好 express 和 http-proxy-middlewa ...

  6. 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    一. 说在前面的话 本节主要在前面章节的基础上补充了几个简单的知识点,比如:第三方调用通过 GlobalHost.ConnectionManager.GetHubContext<MySpecHu ...

  7. 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    并发编程概述   前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...

  8. nginx代理跨域,根据路径参数改变目标服务器地址

    我们都知道nginx是可以做跨域代理的: location ^~ /visited-path/ { proxy_pass http://another-domain/; } 举个例子:假如我们的代理服 ...

  9. 前端笔记之Vue(五)TodoList实战&拆分store&跨域&练习代理跨域

    一.TodoList 1.1安装依赖 安装相关依赖: npm install --save-dev webpack npm install --save-dev babel-loader babel- ...

随机推荐

  1. docker学习------registry可视化的实现

    1.Harbor的发现 之前一直在使用registry,但docker  pull下来的基础镜像并没用携带UI界面,所以查找了一波开源工具,发现了Harbor这一工具,下面对工具进行一个学习. 2.部 ...

  2. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

  3. Balanced Number HDU - 3709

    题目大意:若一个数以某个位置为支点,支点左右的加权和相同,这样的数被称为平衡数,求区间内平衡数的个数 思路:枚举支点位置,针对每个支点进行数位DP,但是0比较特殊,假设该数的长度为len,枚举len次 ...

  4. python&django 实现页面中关联查询小功能(中级篇)

    目的 组合搜索实现如下图功能 知识点 1.使用自定义标签模板(templatetags) 实现 models.py 和 views.py和初级篇一样 重点如下:在app01目录下创建templatet ...

  5. VGG16 ReNetInception network

    VGG16就是运用很简单的2个filter s=2 f=2 的pool以及3x3 same padding的filter. 每pool一下以后 翻倍filter的depth Resnet就是跳级传播结 ...

  6. 秋名山老司机(BS4与正则的比拼)

    因为嘉伟思杯里的一个脚本题目,16进制计算,python3正则还没学,所以没写出来.大佬跟我说也可以用BS4,从DOM上下手,直接爬下来直接一个eval就搞定了,eval可以像这样计算16进制,eva ...

  7. 团队Github实战训练

    班级:软件工程1916|W 作业:团队Github实战训练 团队名称:SkyReach Github地址:Github地址 贡献比例表 队员学号 队员姓名 此次活动任务 贡献比例 221600106 ...

  8. Day 18: 记filebeat内存泄漏问题分析及调优

    ELK 从发布5.0之后加入了beats套件之后,就改名叫做elastic stack了.beats是一组轻量级的软件,给我们提供了简便,快捷的方式来实时收集.丰富更多的数据用以支撑我们的分析.但由于 ...

  9. 020_Linux的孤儿进程与僵尸进程(Unix系统编程)

    1.前言 之前在看<unix环境高级编程>第八章进程时候,提到孤儿进程和僵尸进程,一直对这两个概念比较模糊.今天被人问到什么是孤儿进程和僵尸进程,会带来什么问题,怎么解决,我只停留在概念上 ...

  10. Java中的String、StringBuilder以及StringBuffer

    https://www.cnblogs.com/dolphin0520/p/3778589.html