写代理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. 模拟赛20181016 dp

    给出1-n的序列插入一个bst: 给出T组询问,包含n,h分别代表点数为n,高度为h的树,求所有插入顺序的合法方案数,模1e9+7 样例输入 1 2  1 样例输出 2 #include<bit ...

  2. 20155324《网络对抗》Exp06 信息搜集与漏洞扫描

    20155324<网络对抗>Exp06 信息搜集与漏洞扫描 实践内容 各种搜索技巧的应用 DNS IP注册信息的查询 基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点 ...

  3. 20155324《网络对抗》Exp1 PC平台逆向破解(5)M

    20155324<网络对抗>Exp1 PC平台逆向破解(5)M 实验目标 本次实践的对象是一个名为~pwn1~的~linux~可执行文件. 该程序正常执行流程是:~main~调用~foo~ ...

  4. iTOP-4418开发板支持Android4.4/5.1.1系统、Linux3.4.39、QT2.2/4.7/5.7、Ubuntu12.04

    核心板参数 尺寸:50mm*60mm 高度:核心板连接器组合高度1.5mm PCB层数:6层PCB沉金设计 4418 CPU:ARM Cortex-A9 四核 S5P4418处理器 1.4GHz 68 ...

  5. mysql存储引擎和索引

    正确的创建合适的索引,是提升数据库查询性能的基础. 第一章 mysql之索引 索引的定义:索引是为了加速对表中数据行的检索而创建的一种分散存储的数据结构. 我们为什么要使用索引: a.极大的减少存储引 ...

  6. python基础之文件操作和函数

    一.知识点 1.三元运算 a = 2 b = 3 val = 6 if a < b else 7 print(val) 2.文件读取 f = open(file='file.txt',mode= ...

  7. springSecurity有毒啊啊啊啊啊啊啊

    心累 的一天呀 昨天跑的demo 怎么都不拦截 我服: 第二天 又重新 建立 了个 重新做了 一遍  就神奇的 拦击了 我 ......有毒 我哩个去..抓狂 !!!!! <吐血总结,好想死&g ...

  8. sql报错注入:extractvalue、updatexml报错原理

    报错注入:extractvalue.updatexml报错原理 MySQL 5.1.5版本中添加了对XML文档进行查询和修改的两个函数:extractvalue.updatexml 名称 描述 Ext ...

  9. 我的redis入门之路

    1:操作环境:vmware12 , centOs7 ,redis5.0.3 centOs7安装与下载链接(原文地址): https://blog.csdn.net/qq_42570879/articl ...

  10. git pull命令的用法

    git pull用法: git pull命令的作用是:取回远程主机某个分支的更新,再与本地的指定分支合并. 一句话总结git pull和git fetch的区别: git pull = git fet ...