gulp解决跨域的配置文件问题

废话不多说，直接上代码

//引入插件
var gulp = require('gulp');
// var Proxy = require('gulp-connect-proxy');
var connect = require('gulp-connect');
var proxy = require('http-proxy-middleware');

//使用connect启动一个Web服务器
gulp.task('connect', function () {
  connect.server({
    root: './',
    livereload: true,
    port: 8010,
    middleware: function (connect, opt) {
      return [
        proxy('/fs', {
          target: 'http://172.16.2.52:8080',
          changeOrigin:true
        }),
        proxy('/product', {
          target: 'http://172.16.1.60:8080',
          changeOrigin:true
        }),
        proxy('/bpauth', {
          target: 'http://192.168.24.77:8080',
          changeOrigin:true
        })
      ]
    }
  });
});

gulp.task('watch', function () {
  gulp.watch(['./*.html'], ['html']);

});

gulp.task('html', function () {
  gulp.src('./*.html')
    .pipe(connect.reload());
});

//运行Gulp时，默认的Task
gulp.task('default', ['connect', 'watch']);

以上这篇gulp解决跨域的配置文件问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 前端构建工具之gulp的配置与搭建详解

    前端构建工具之gulp的配置与搭建详解

    前言 在如今的前端开发中,已经不再是一些静态文件了. 对于很多Web App来说,前端代码甚至比后端更加复杂,更加难以管理,这主要来源于一下几个方面: 1.许多第三方库的依赖需要自动运行 2.独立的前端测试需要自动运行 3.代码需要发布时打包 一.为什么要使用gulp? 在我们的工作流程里,应该尽量减少重复的工作,很多任务都可以自动去执行,比如一些相关文件的操作,自动监视一些文件的变化,发生变化以后,就去执行事先设计好的任务. 说了这么多,那么gulp到底能做什么? a.创建项目工程 b.压缩各

  • 如何编写javascript的gulp插件

    如何编写javascript的gulp插件

    很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件"gulp-uglify",来达到压缩JavaScript文件的目的. 代码如下: 今儿,我们的重点就是,自己也来实现一个gulp插件. 正文 其实,如果只是单纯地想要编写一个gulp插件不难,可以借助through2或者through-gulp来编写(through-gulp

  • 使用gulp搭建本地服务器并实现模拟ajax

    使用gulp搭建本地服务器并实现模拟ajax

    本文主要给大家总结了在工作中可能会用到的小工具,在此记录一下. 可以实现的功能有: 1. 本地http服务器 2.页面实时刷新 3.可以模拟ajax请求 第一步,新建package.json文件. 用到了gulp.gulp-webserver.gulp-livereload package.json的内容如下: { "name": "localserver", "version": "1.0.0", "descrip

  • 简单谈谈gulp-changed插件

    前言 gulp-changed插件的作用,是用来过滤未被修改过的文件,只有修改后的文件才能通过管道.这样做的好处时,只处理修改后的文件,减少后续程序的执行时间. 根据官方给出的例子: const SRC = 'src/*.js'; const DEST = 'dist'; gulp.task('default', () => { return gulp.src(SRC) .pipe(changed(DEST)) .pipe(gulp.dest(DEST)) .pipe( /* 其他操作 */ )

  • 详解前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件

  • 详解前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次

  • 基于gulp合并压缩Seajs模块的方式说明

    基于gulp合并压缩Seajs模块的方式说明

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题. 然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的

  • 前端构建工具之gulp的语法教程

    前端构建工具之gulp的语法教程

    前言 上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法. 语法说来其实很简单,主要有以下4种: gulp四种语法 现在我们把src下面的index.html文件copy到发布文件夹dist下: 复制单个文件 webstorm下运行 . 点击运行 如此,便有: dist文件夹下更新 复制多个文件 复制到某个特定的文件夹下 每次运行之前都需要更新一下 最终 复制指定文件 排除某个文件 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家

  • gulp解决跨域的配置文件问题

    废话不多说,直接上代码 //引入插件 var gulp = require('gulp'); // var Proxy = require('gulp-connect-proxy'); var connect = require('gulp-connect'); var proxy = require('http-proxy-middleware'); //使用connect启动一个Web服务器 gulp.task('connect', function () { connect.server(

  • 详解基于angular-cli配置代理解决跨域请求问题

    详解基于angular-cli配置代理解决跨域请求问题

    1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题. 2.通用解决方案 如果浏览器支持HTML5,那么就可以一

  • Angular4开发解决跨域问题详解

    1.跨域 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同 同源策略: 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是study.cn,请求另外一个域名一段数据,这个时候在浏览器上会报错,这个就是同源策略的保护,如果浏览器对javascri

  • 利用nginx解决跨域问题的方法（以flask为例）

    利用nginx解决跨域问题的方法（以flask为例）

    前言 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax请求api,但是我们不得不ajax请求中间层,中间层再请求api. 如图: 为了少敲代码,提高工作效率,我们当然希望将python中间层砍掉,但是如何解决以下三个问题,成为关键: 后端渲染 登录状态判定 跨域转发api 关于1,2我会在另外两篇博客中详细叙述,这篇文章主要解决3,也就是跨域问题.解决

  • 利用jsonp与代理服务器方案解决跨域问题

    利用jsonp与代理服务器方案解决跨域问题

    前言 本文将从实践角度介绍如何使用jsonp和代理服务器方案解决跨域问题,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 浏览器为了保护用户安全,引入了同源策略,即一个服务器页面无法访问另一个协议.域名.端口不同的服务器数据.当页面需要跨服务器访问另一个服务器的数据时,即产生跨域行为.以豆瓣的公开API(https://api.douban.com/v2/book/1220562)为例,当前我的服务器处于http://127.0.0.1:5000下,豆瓣的服务器很显然跟我的服务

  • vue解决跨域路由冲突问题思路解析

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*

  • vue.js使用代理和使用Nginx来解决跨域的问题

    vue.js使用代理和使用Nginx来解决跨域的问题

    使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一.Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二.修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包

  • 如何在vue里面优雅的解决跨域(路由冲突问题)

    如何在vue里面优雅的解决跨域,路由冲突问题 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*': { target: 'http://localhost:3000' } }, 这种配置方式在一定程度上解决了跨域问题,但是会带来一些问题, 比如我们的vue 路由 也命名为 goods,这时候就会产生了冲突, 如果项目中接口很多,都在这里配置是很麻烦的,也

  • vue打包使用Nginx代理解决跨域问题

    vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了. 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 使用nginx配置反向代理,这样就可以在前端彻底解决跨域问题. vue index.js文件源码 'use strict' // Template version: 1.2.7 // see http://vuejs-templates.github.io/webpack for

  • 详解nginx代理天地图做缓存解决跨域问题

    作为一个GISer开发者,天地图是经常在项目中以底图的形式出现,其加载地址如: 1.天地图矢量:http://t{0-6}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z} 2.天地图影像:http://t{0-6}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z} 3.天地图地形:http://t{0-6}.tianditu.com/DataServer?T

随机推荐