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- ...
随机推荐
- [译]ASP.NET Core揭秘 - Razor Pages
原文 什么是Razor Pages? Razor pages是ASP.NET Core 2.0的新特性,它被设计用来更快的开发页面,比传统的MVC模式更便捷. 创建项目 为了使用Razor Pages ...
- 关于SVN报错 svn: E170013 E125006: contains invalid filesystem format option 'addressing logical'
在使用svn的时候,遇到了这样的一个问题 首先我使用TortoiseSVN 右键创建的repository. 之后用IDEA,配置了1.9.4版本的SVN,去commit访问这个仓库 结果出现了以下的 ...
- Linux二进制安装apache2.4.25
Linux二进制安装apache2.4.25 安装环境:CentOS 6.2 先检查是否安装了Apache 如通是通过rpm包安装的话直接用下面的命令:rpm -q httpd 也可以使用如下两种方法 ...
- web前端效率提升之浏览器与本地文件的映射-遁地龙卷风
1.chrome浏览器,机制是拦截url, 1.在浏览器Element中调节的css样式可以直接同步到本地文件,反之亦然,浏览器会重新加载css,省去刷新 2.在source面板下对js的编辑可以同步 ...
- 产品研发不等待 i.MX6Q全新推出增强版本 官方店铺下单双重优惠
迅为全新推出PLUS版本的i.MX6Q方案,版本介绍:它是NXP公司全新推出的i.MX6Q增强版新品,显著增强了图形和存储器性能,面向较高图形性能的先进消费电子.汽车和工业多媒体应用的多核平台.
- 《NFC开发实战详解》笔记
地点:30教 5楼 男厕对面 * 时间:下午三点 * 天气:中雨 * 状态:3 * ******************************************************* ...
- pythonのdjango Form简单应用。
Form表单有两种应用场景: 1.生成HTML标签. 2.验证输入内容. 如果我们在django程序中使用form时,需要在views中导入form模块 from django import form ...
- php nginx 负载均衡简单配置过程
负载均衡 负载均衡是我们大流量网站要做的一个东西,下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法,希望对有需要的同学有所帮助哦. 简单了解一下什么是负载均衡,单从字面上的意思来理解就可以解 ...
- 微软推荐的.net命名规范
许多命名约定都与标识符的大小写有关.值得注意的是,公共语言运行库 (CLR) 支持区分大小写和不区分大小写的语言.本主题中描述的大小写约定可帮助开发人员理解和使用库. 大小写样式 下列术语描述了标识符 ...
- Shell执行*.sql
> mysql -uroot -p123456 > use db_test > source /root/temp.sql