前端项目本地调试远程接口（解决跨域问题）

开发前端项目的时候，经常会因为跨域问题导致不能在本地调试远程的ajax接口（如：XMLHttpRequest cannot load http://***. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.）。

当然可以通过后端配置来解决，但是作为前端，我们也有自己的方法。原理应该就是自己搭建一个本地服务器，然后写相应的代码来实现数据的转接。nodejs就是可以用http.request，php可以用Curl等等。当然对于不了解后端代码的童鞋也不用担心，我们可以运用一些前端工具来完成。

这里主要介绍gulp的http-proxy-middleware组件（官网：https://www.npmjs.com/package/http-proxy-middleware）。

假设我们的远程接口是http://web.zhaicool.net/api/ajax.php

本地服务器链接是 http://localhost:8080

那么对应的gulpfile.js文件代码为：

var gulp = require('gulp'),
    proxyMiddleware = require('http-proxy-middleware'),
    connect = require('gulp-connect');

gulp.task('server',
    function () {
        var middleware = proxyMiddleware(['/api'], {
            target: 'http://web.zhaicool.net/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/api'
            }
        });

        connect.server({
            root: './src',
            port: 8080,
            livereload: false,
            middleware: function (connect, opt) {
                return middleware
            }

        });

    });

项目中比如index.html的接口如下配置：

//我是引入了jquery，所以直接用$ajax

$.ajax({
    type: "GET",
    url: "http://localhost:8080/api/ajax.php",//接口本应该是http://web.zhaicool.net/api/ajax.php，但是被http-proxy-middleware转接了
    success: function (data) {
        alert(data);//helloworld
    }
});

如果涉及到多个接口，可以写多个middleware 

gulp.task('server',
function() {
    var middleware1 = proxyMiddleware(['/api1'], {
        target: 'http://web.zhaicool.net/',
        changeOrigin: true,
        pathRewrite: {
            '^/api1': '/api1'
        }
    });
    var middleware2 = proxyMiddleware(['/api2'], {
        target: 'http://web.zhaicool.net/',
        changeOrigin: true,
        pathRewrite: {
            '^/api2': '/api2'
        }
    });
    var middleware3 = proxyMiddleware(['/api3'], {
        target: 'http://web.zhaicool.net/',
        changeOrigin: true,
        pathRewrite: {
            '^/api3': '/api3'
        }
    });

    connect.server({
        root: './src',
        port: 8080,
        livereload: false,
        middleware: function(connect, opt) {
            return [middleware1,middleware2,middleware3]
        }

    });

});

以上是gulp中的相关设置，如果用vue-cil搭建vue项目，也有相关的方法，即在config文件夹下的index.js文件，找到module.exports对象中的dev对象，修改dev对象的proxyTable属性：

proxyTable: {
 '/api': {
    target: 'http://web.zhaicool.net/',
    changeOrigin: true,
   pathRewrite: {
     '^/api': '/api'
   }
  }
},

方法跟上面的gulp一样。

未经允许不得转载：前端撸码笔记 » 前端项目本地调试远程接口（解决跨域问题）