apache设置(参考)

用 apache 的 mod_proxy 模块开启反向代理功能来实现:

1 修改 apache 配置文件 httpd.conf ,去掉以下两行前面 # 号

    LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

2 在 server config 或 virtual host 中增加:

    ProxyRequests Off

    <Proxy *>
Order deny,allow
Allow from all
</Proxy> ProxyPass /folder http://****.com/floder

重启 apache.

注释:

  • ProxyRequests Off 指令是指采用反向(reverse)代理,对于客户端而言它就像是原始服务器,并且客户端不需要进行任何特别的设置;而正向代理允许客户端通过它访问任意网站并且隐藏客户端自身,因此必须采取安全措施以确保仅为经过授权的客户端提供服务。
  • ProxyPass 指令允许将一个远端服务器映射到本地服务器的 URL 空间中,此时本地服务器并不充当代理角色,而是充当远程服务器的一个镜像。/folder 是一个本地虚拟路径,http://****.com/floder 是一个指向远程服务器的部分 URL

如果不想对某个子目录进行反向代理时,可以用"!"指令。比如说:

    ProxyPass /folder/exception !
ProxyPass /folder http://****.com/folder

将会代理除 /folder/exception 之外的所有对 http://****.com/floder 的请求。

如访问http://localhost/folder/1.html,apache会将请求变为http://****.com/folder/1.html。ajax的/folder/data.json则会转向http://****.com/folder/data.json

gulp server设置:

 browserSync.init({
ui: false,
notify: false,
port: 5678,
// 设置代理请求
proxy: 'localhost'
})

以上设置之后,browserSync请求http://localhost:5678/index.html,实则会请求地址http://localhost/index.html。

完整gulpfile.js

var gulp = require("gulp")
, gutil = require("gulp-util") , del = require("del")
, sass = require("gulp-sass")
, uglify = require('gulp-uglify')
, rename = require("gulp-rename") , browserSync = require("browser-sync").create()
, reload = browserSync.reload , sequence = require("run-sequence")
, plumber = require("gulp-plumber")
, watch = require("gulp-watch") , through2 = require("through2")
, path = require("path")
, fs = require("fs"); // #############################################
// # init params // 收集参数
var cwd = process.cwd();
var cmdargs = process.argv.slice(2);
var cmdname = cmdargs.shift();
var cmdopts = {};
var srcpath = "./src";
var distpath = "./dist"; while (cmdargs.length) {
var key = cmdargs.shift().slice(2);
var val = cmdargs.shift();
cmdopts[key] = key === "src" || key === "dist" ? normalizePath(val) : val;
} // 参数配置
var release = cmdname === "release";
var reloadTimer = null;
var devport = 5678;
var paths = {
src: path.join(__dirname, srcpath),
dist: path.join(__dirname, distpath)
} function normalizePath(url) {
if (url.charAt(0) === "/" || url.indexOf(":") > -1) {
return path.normalize(url);
}
return path.normalize(path.join(cwd, url));
} function setOptions(cmd, cmdopts) {
if (cmd === "start") {
paths.src = cmdopts.src ? path.join(cmdopts.src, srcpath) : paths.src;
} else if (cmd === "release") {
paths.src = cmdopts.src ? path.join(cmdopts.src, srcpath) : paths.src;
paths.dist = cmdopts.dist ? cmdopts.dist : path.normalize(paths.src + "/../" + distpath);
}
} function showUsage() {
console.log("Usage:\n");
console.log(" gulp 显示帮助");
console.log(" gulp help 显示帮助");
console.log(" gulp start --src src 在--src目录下自动化开发调试环境");
console.log(" gulp release --src src --dist dist 构建--src线上版本到--dist目录\n");
console.log(" gulp start --src src --proxy localhost 使用gulp代理localhost请求,并且实时监听src文件修改");
} // #############################################
// # default tasks // # clean path
gulp.task("clean:dist", function () {
return del([paths.dist], {force: true});
}); // # 编译css
gulp.task("sass", function() {
var base = paths.src;
var dest = base;
return gulp.src(base + "/**/*.scss", {base: base})
.pipe(plumber())
.pipe(sass({
precision: 2,
outputStyle: release ? "compressed" : "expanded"
//sourceComments: release ? false : true
})
.on("error", sass.logError))
.pipe(gulp.dest(dest));
}); // # 压缩js
gulp.task("uglify", function() {
var base = paths.src;
var dest = paths.dist;
return gulp.src(base + "/**/*.js", {base: base})
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest(dest));
}); // # 复制静态资源
gulp.task("copy:dist", function() {
var base = paths.src;
var dest = paths.dist;
return gulp.src([
base + "/**/*",
"!" + base + "/**/*.js",
"!" + base + "/**/*.scss"
], {base: base})
.pipe(gulp.dest(dest));
}); // # serv & watch
gulp.task("server", function() {
// start server
browserSync.init({
ui: false,
notify: false,
port: devport,
// 设置代理请求
proxy: cmdopts.proxy,
server: !cmdopts.proxy ? {
baseDir: paths.src
} : false
}); // # watch src资源, 调用相关任务预处理
watch(paths.src + "/**/*.scss", function(obj) {
sequence("sass");
}); // # 刷新浏览器
// # 限制浏览器刷新频率
watch(paths.src + "/**/*", function(obj) {
var url = obj.path.replace(/\\/g, "/");
var absurl = url;
url = path.relative(paths.src, url);
console.log("[KS] " + absurl); // skip scss
if (!/\.scss$/.test(url)) {
if (reloadTimer) {
clearTimeout(reloadTimer);
}
reloadTimer = setTimeout(reload, 1000);
}
});
}); // #############################################
// # public task gulp.task("default", showUsage);
gulp.task("help", showUsage); gulp.task("start", function(cb) {
release = false;
setOptions("start", cmdopts);
sequence("sass", "server", cb);
}); gulp.task("release", function(cb) {
release = true;
setOptions("release", cmdopts);
sequence("clean:dist", ["sass", "uglify"], "copy:dist", cb);
});

windows bat命令文件:

C:
cd D:\iwork\www\work\www-front\dev-specs
D:
:: 不使用代理请求
:: gulp start --src ../m/zt//h5/olympic
:: 使用代理请求
gulp start --src ../m/zt//h5/olympic --proxy http://localhost/work/www-front/m/zt/2016/h5/olympic/src/

gulp+apache代理请求处理javascript跨域请求的更多相关文章

  1. thinkphp,javascript跨域请求解决方案

    javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...

  2. 简单配置nginx反向代理,实现跨域请求

    简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...

  3. 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  4. 用iframe设置代理解决ajax跨域请求问题

    面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...

  5. JavaScript 跨域请求

    1.最简单通用的做法就是 反向代理         通过nginx搭建一个反向代理服务器,通过将跨域的请求配置成转发:此方法适用于动静分离时,很多跨域请求的情况下: server { listen 8 ...

  6. Javascript跨域请求的几种解决方法

    什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到 ...

  7. javascript 跨域请求详细分析(终极跨域解决办法)

    自从我接触前端以来,接手的项目里面很大部分都是前后端分离的,后端只提供接口,前端根据后端接口渲染出实际页面.个人觉得这是一个挺好的模式,前后端各自负责各自的模块,分工明确,而且也给前端更大的发挥空间. ...

  8. javascript跨域请求RESTful Web Service

    跨域请求RESTful Web Service 当我们用js请求RESTful Web Service的时候,通常会出现跨域无法访问的问题,也就是无法正常得到我们要的值.jsonp是个解决问题的方法. ...

  9. react 设置代理(proxy) 实现跨域请求

    一,对于使用creat-react-app构建的项目,可以直接在package.json下配置,具体如下 "proxy": "http://api.xxxx.com&qu ...

随机推荐

  1. Scala 系列(一)—— Scala 简介及开发环境配置

    一.Scala简介 1.1 概念 Scala 全称为 Scalable Language,即"可伸缩的语言",之所以这样命名,是因为它的设计目标是希望伴随着用户的需求一起成长.Sc ...

  2. .net Dapper 实践系列(1) ---项目搭建(Layui+Ajax+Dapper+MySQL)

    目录 写在前面 一.前期准备 1.在MySQL创建数据库 2.创建项目 3.安装程序包 4.添加插件 5.添加DbOption文件夹 6.添加实体类 写在前面 学习并实践使用Dapper 这个小型的O ...

  3. CentOS7.6离线安装docker

    2019/10/24,docker 摘要:CentOS 7.6中离线安装docker 18.06.3以及docker-compose 1.24.1 在线安装可参照 文档 所需环境 1.CentOS 7 ...

  4. 4.matplotlib绘制直方图

      # coding=utf-8 from matplotlib import pyplot as plt from matplotlib import font_manager a=[131, ...

  5. 分享AWS网站

    1.AWS服务运行状况检测网站:   https://status.amazonaws.cn/ 2.AWS架构白皮书:https://aws.amazon.com/cn/architecture/?a ...

  6. 连续子数组的最大乘积及连续子数组的最大和(Java)

    1. 子数组的最大和 输入一个整形数组,数组里有正数也有负数.数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.求所有子数组的和的最大值.例如数组:arr[]={1, 2, 3, -2, ...

  7. 学习笔记之三十年软件开发之路 - Things I Learnt The Hard Way (in 30 Years of Software Development)

    三十年软件开发之路 https://mp.weixin.qq.com/s/EgN-9bIHonRid1DM0csQDw https://blog.juliobiason.net/thoughts/th ...

  8. JavaWeb 之 Filter 敏感词汇过滤案例

    需求: 1. 对day17_case案例录入的数据进行敏感词汇过滤 2. 敏感词汇参考 src路径下的<敏感词汇.txt> 3. 如果是敏感词汇,替换为 *** 分析: 1. 对reque ...

  9. 【Docker】docker安装Jenkins

    一.下载镜像 docker pull jenkinsci/jenkins 二.运行Jenkins容器 docker run --name myjenkins -d -p 8580:8080 -p 50 ...

  10. 云计算与大数据实验:Hbase shell操作成绩表

    [实验目的] 1)了解hbase服务 2)学会hbase shell命令操作成绩表 [实验原理] HBase是一个分布式的.面向列的开源数据库,它利用Hadoop HDFS作为其文件存储系统,利用Ha ...