前端接口调试跨域问题

对于前后的分离的项目开发，前端工作人员常常需要调试后端接口，这时候一般都会出现跨域问题，正对跨域使用的各种解决方法，现提供两中比较简单的方案和案例，便于大家学习开发。

使用gulp构建工具的

如果你使用了gulp构建工具，你需要引入

var connect = require('gulp-connect');

var proxy = require('http-proxy-middleware');这两个插件，并定义server任务

gulp.task('server', function() {
  connect.server({
    root: ['build/h5/dev/'], //监听的文件所在位置
    port: 8084, //想监听的端口号，可以不用apache
    livereload: true,
    middleware: function(connect, opt) {
      return [
        //api/call/：ajax请求拦截的
        proxy('/api/call', {
          //此处根据情况加端口与不加端口
          //域名可以不加端口
          //IP要加端口
          //http://www.pig-2.com
          target: 'http://116.62.222.82:8082',
          changeOrigin: true
        })
      ]
    }
  });
});

使用webpack构建工具的

1 引入webpack-dev-server插件
2.在webpack.config.js中配置

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    hot: true,
    port: 8081,
    // host: '0.0.0.0',
    proxy: {
      '/api/v1': {
        target: 'http://192.168.0.130',
        pathRewrite: { '^/api/v1': '/api/v1' },
        changeOrigin: true
      }
    }
  },

3.node 运行webpack-dev-server服务器

使用nginx反向代理（window系统下）

1.下载nginx
2.安装好之后，修改nginx.conf文件如下

 server {
        listen       801;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   D:\h5-vue\dist;
            index  index.html index.
        }
        location ^~/v1 {//正则表达式，以v1开头的ajax接口请求
            proxy_pass http://www.pig-2.com:8081;//真实的请求路径
        }
}

利用apache cores技术的（后端设置）