前言
今天尝试使用 http-proxy-middleware 插件解决本地开发中的跨域问题。这篇文章主要总结如何使用 proxy 解决跨域问题，proxy 是通过代理来处理的。
什么是跨域问题？
浏览器为了保证信息安全，规定了资源访问使用同源策略。所以，当浏览器访问的资源来自不同源，就会出现跨源资源访问，即跨域问题。 同源策略的定义参看文章:CORS（cross-origin resourse sharing)跨域资源共享
如何解决跨域？
解决方法一：使用 browser-sync + http-proxy-middleware 做代理
下面我先在本地开发中复现 AJAX 跨域请求问题。 本地开发，需要请求远程服务器资源，使用 ajax 请求获取远程资源。代码如下：
$(document).ready(function() {
$.ajax({
type:"GET",
url:"./api/.....",// 远程地址
dataType:"json",
success:function(data) {
console.log(data);
}
});
})
此时浏览器会出现报错，提示跨域问题。 意思是出现跨域请求错误。 复现问题后，我们安装好代理工具：
然后，我们在本地事先建立好的配置文件 gulpfile.js 中添加如下配置代码： （备注：我使用的打包工具是 gulp）
var browserSync = require('browser-sync').creat();
var proxyMiddleware = require('http-proxy-middleware');
var proxy = ('./api',{
target:"http://echo.websocket.org",// 远程地址url
changeOrigin:true,// 虚拟主机站点需要
pathRewrite:{
'^/api/(.*)':'/$1' // 正则匹配，替换api起始的路径
}
});
gulp.task('server',function(){
browserSync.init({
server:'./dist',
notify:false,
middleware:[proxy]
});
});
其他解决方法参看如下：
其他跨域解决方法
- 1.CORS（cross-origin resourse sharing)跨域资源共享
- 2.JSONP
- 3.document.domain + iframe
- 4.window.name + iframe
- 5.postMessage
- 6.proxy
