如何利用http-proxy-middleware的api代理實現跨域

1. 創建一個文件夾
   1. 包含如下兩個文件
      1. gulpfil.js(空,下文介紹如何編寫)
      2. package.json(引入模塊,版本號很重要)
         1. 　

            {
              "devDependencies": {
                "gulp": "^3.9.1",
                "gulp-connect": "^5.7.0",
                "http-proxy-middleware": "^0.19.1"
              }
            }

         2. 在此文件夾打開git bush here ,下載上面配置的模塊,gulp模塊建議全局安裝;
2. 同文件夾下,創建一個src/index.html目錄
   1. 　　創建一個button,利用Vue綁定axios請求事件

      new Vue({
              el: "#app",
              methods: {
                  GET() {
                      axios({
                          method:'GET',
                          url: 'api/php/',
                          data:"",
                          }).then((res)=>{
                              console.log(res);
                          })
                      }
                  }
              })

       

3. 此時編輯gulpfile.js

   var gulp = require("gulp");
   var connect =require("gulp-connect");
   var proxy = require("http-proxy-middleware");
   
   gulp.task("default",function(){
       // console.log("ok");
       connect.server({
           root:"src", //啟動此服務下面的文件夾
           host:"10.41.153.67",  //此台電腦的ip
           port:"7777",   //自定義端口
           // livereload:true,
           //發送axios時,原本請求地址http://10.41.153.67:7777/api/php/
           //利用proxy模塊提供的如下方法
               //此時請求地址http://10.41.153.67:7777/api/php/
               //匹配到"/api"的時候,將其源更改為http://10.41.153.67:8888
               //所以真正的請求地址變為了
               //故此不存在跨域 
           middleware:function(){
               return [
                 proxy(
                   "/api",{
                       target:"http://10.41.153.67:8888",   
                       changeOrigin:true,  //允許跨域
                       pathRewrite:{    //相當於是替代‘/api’，如果接口中是沒有api的，那就直接置空，
                                       //如果接口中有api，那就得寫成{‘^/api’:‘/api’}，
                                       //可以理解為一個重定向或者重新賦值的功能。 
                           "^/api":"",
                       }
                   }
               )  
               ]
           }
       })
   })

4. 　萬事俱備,此時,只需要在此電腦的另起一個服務,即可實現跨域,如果需要訪問其他電腦,應更改target中給api配置的數據;

　　　　純手打,希望能對你有所幫助;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　另:本文來源於個人學習中的心得,如有問題,望不吝賜教