對于前后的分離的項目開發(fā)，前端工作人員常常需要調(diào)試后端接口，這時候一般都會出現(xiàn)跨域問題，正對跨域使用的各種解決方法，現(xiàn)提供兩中比較簡單的方案和案例，便于大家學習開發(fā)。

使用gulp構建工具的

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

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

var proxy = require('http-proxy-middleware');這兩個插件，并定義server任務

gulp.task('server', function() {
  connect.server({
    root: ['build/h5/dev/'], //監(jiān)聽的文件所在位置
    port: 8084, //想監(jiān)聽的端口號，可以不用apache
    livereload: true,
    middleware: function(connect, opt) {
      return [
        //api/call/：ajax請求攔截的
        proxy('/api/call', {
          //此處根據(jù)情況加端口與不加端口
          //域名可以不加端口
          //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系統(tǒng)下）

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技術的（后端設置）