如何利用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配置的数据;

　　　　纯手打,希望能对你有所帮助;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　另:本文来源于个人学习中的心得,如有问题,望不吝赐教