对于前后的分离的项目开发，前端工作人员常常需要调试后端接口，这时候一般都会出现跨域问题，正对跨域使用的各种解决方法，现提供两中比较简单的方案和案例，便于大家学习开发。
使用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;//真实的请求路径
}
}
