使用gulp配置代理，简单解决前端跨域问题

taohonghui 发布于2019-08-26 10:55 / 3227人阅读

摘要：配置代理，解决跨域问题简单的解决跨域问题，有实时重新加载功能，适用于偶尔改个文件，或者活动页上面有简单的前后端交互初始化全局安装本地下载包下载包新建文件实时重新加载启动时默认浏览器打开的文件代理的域名因为升级到了，所以使

gulp配置代理，解决跨域问题

简单的解决跨域问题，有实时重新加载功能，适用于偶尔改个文件，或者H5活动页上面有简单的前后端交互

npm init初始化

全局安装gulp npm i gulp -g

本地下载gulp包 npm i gulp --save-dev

下载gulp-webserver包 npm i gulp-webserver --save-dev

新建gulpfile.js文件

var gulp = require("gulp");
var webserver = require("gulp-webserver");

gulp.task("webserver", function () {
  gulp.src("./")
    .pipe(webserver({
      host: "localhost",
      port: 8888,
      livereload: true, // 实时重新加载
      open: "./index.html", // 启动时默认浏览器打开的文件
      directoryListing: {
        enable: true,
        path: "./"
      },
      proxies: [{
        source: "/api",
        target: "http://www.your.com" // 代理的域名
      }]
    }))
});
// gulp4.0
gulp.task("default", gulp.series(["webserver"], function () {
  console.log("gulp webserver start successfully at localhost:8888");
}));
// 因为gulp升级到了4.0，所以使用gulp.series来启动，如果使用的是gulp3.*的话请将上面的代码替换为下面的
// gulp 3.*
gulp.task("default", ["webserver"], function () {
  console.log("gulp webserver start successfully at localhost:8888");
});

在项目根目录打开命令窗口，使用命令gulp启动

使用：
如果接口是https://www.yoururl.com/login/index
则发起请求时使用/api/login/index

专线服务 idc机房托管跨域问题跨域解决办法 cdn跨域问题 javascript跨域问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106831.html

移动端H5多页开发拍门砖经验

摘要：以下会以其中一个以公积金页面开发项目作为例子，介绍移动端的一些常见问题和使用作为进行多页开发的经验。所以要想在微信开发调试工具中获取，我们需要使用一种叫做内网穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);两年前刚接触移动端开发，刚开始比较疑惑，每次遇到问题都是到社区里提问...

hightopo 2019-08-22 18:20 评论0 收藏0
Nginx反向代理解决前后端联调跨域问题

摘要：反向代理前后端联调跨域什么是跨域跨域，指的是浏览器不能执行其他网站的脚本。这时候，用反向代理实现跨域，是最简单的跨域方式。 keywords： Nginx反向代理前后端联调跨域 1.什么是跨域跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。所谓同源是指，域名，协议，端口都相同。浏览器执行javascrip...

QiuyueZhong 2019-07-25 13:59 评论0 收藏0
vuejs开发H5页面总结

摘要：不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。淘宝的方案总结为根据设备设备像素比设置的值，保持视口始终等于设备物理像素，接着根据屏幕大小动态计算根字体大小，具体是将屏幕划分为等分，每份为，就等于。最近参与了APP内嵌H5页面的开发，这次使用vuejs替代了jQuery，仅仅把vuejs当做一个库来使用，效率提高之外代码可读性更强，在此分享一下自己的一些开发中总结的经验。...

Sike 2019-08-20 17:43 评论0 收藏0