browser-sync + http-proxy-middleware 配置代理跨域
写代理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 配置代理跨域的更多相关文章
- reactjs中配置代理跨域
第一步,下载依赖 http-proxy-middleware yarn add http-proxy-middleware 第二步,在src下建立setupProxy.js const proxy = ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
- Next.js 配置接口跨域代理转发
使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能. 先安装好 express 和 http-proxy-middlewa ...
- 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)
一. 说在前面的话 本节主要在前面章节的基础上补充了几个简单的知识点,比如:第三方调用通过 GlobalHost.ConnectionManager.GetHubContext<MySpecHu ...
- 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)
并发编程概述 前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...
- nginx代理跨域,根据路径参数改变目标服务器地址
我们都知道nginx是可以做跨域代理的: location ^~ /visited-path/ { proxy_pass http://another-domain/; } 举个例子:假如我们的代理服 ...
- 前端笔记之Vue(五)TodoList实战&拆分store&跨域&练习代理跨域
一.TodoList 1.1安装依赖 安装相关依赖: npm install --save-dev webpack npm install --save-dev babel-loader babel- ...
随机推荐
- PHP代码审计之XSS操作
XSS XSS是Cross Site Scripting(跨站脚本攻击), 它与sql注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/修改/删除的目的,而在XSS攻击中,通过插入 ...
- rcu-bp关键代码解读
1 什么是TLS 原理在网上资料很多,这里不展开. 简单点说,动态申请的每线程变量.有一类比较熟悉的每线程变量是一个带__thread的每线程变量,两者的区别在于,TLS这类每线程变量是动态 ...
- SQL server 数据库中插入中文变???格式乱码的问题另一种容易忽略的情况(C#操作dapper)
1.先查查 VS2015 中的XXX.cs页面中编码格式,记事本打开另存一下,编码格式可能是ANSI改为unioncode. (中文前面加N或者改排序规则解决不了的情况有可能是以上原因.)
- LeetCode第十六题-找出数组中三数之和最接近目标值的答案
3Sum Closest 问题简介: 给定n个整数的数组nums和整数目标,在nums中找到三个整数,使得总和最接近目标,返回三个整数的总和,可以假设每个输入都只有一个解决方案 举例: 给定数组:nu ...
- L2-011 玩转二叉树 (25 分) (树)
链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805065406070784 题目: 给定一棵二叉树的中序遍历和前序 ...
- Spring Cloud 2-Config 分布式配置中心(七)
Spring Cloud Config 1.github配置 2.服务端配置 pom.xml application.xml Application.java 3.配置和命名 1. 配置加载顺序 ...
- 24 Game
You have 4 cards each containing a number from 1 to 9. You need to judge whether they could operated ...
- hammer.js初探
hammer.js官方文档 hammerjs是什么 hammerjs是一个短小精悍的库,他可以让我们轻松的实现移动端上的手势. hammerjs的两大优势如下: 为移动端网页添加相关手势. 去除移动端 ...
- 二, 字符串和编码之 python 格式化
1),在Python中,采用的格式化方式和C语言是一致的,用%实现,看下例: >>> 'Hello, %s' % 'world' 'Hello, world' >>> ...
- Android 插件化和热修复知识梳理
概述 在Android开发中,插件化和热修复的话题越来越多的被大家提及,同时随着技术的迭代,各种框架的发展更新,插件化和热修复的框架似乎已经日趋成熟,许多开发者也把这两项技术运用到实际开发协作和正式的 ...