使用gulp配置代理，簡單解決前端跨域問題

taohonghui 發布于2019-08-26 10:55 / 3411人閱讀

摘要：配置代理，解決跨域問題簡單的解決跨域問題，有實時重新加載功能，適用于偶爾改個文件，或者活動頁上面有簡單的前后端交互初始化全局安裝本地下載包下載包新建文件實時重新加載啟動時默認瀏覽器打開的文件代理的域名因為升級到了，所以使

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

云服務器 GPU云服務器跨域問題跨域解決辦法 cdn跨域問題 javascript跨域問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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