對于前后的分離的項目開發(fā)，前端工作人員常常需要調(diào)試后端接口腋寨，這時候一般都會出現(xiàn)跨域問題蹋砚，正對跨域使用的各種解決方法扼菠，現(xiàn)提供兩中比較簡單的方案和案例，便于大家學(xué)習(xí)開發(fā)坝咐。
使用gulp構(gòu)建工具的
如果你使用了gulp構(gòu)建工具循榆，你需要引入
var connect = require('gulp-connect');
var proxy = require('http-proxy-middleware');這兩個插件，并定義server任務(wù)
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構(gòu)建工具的
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服務(wù)器
使用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;//真實的請求路徑
}
}
