Open HolyZheng opened 6 years ago
实际开发过程中还可以通过webpack.devServer.proxy配置一个反向代理:
proxy: {
"/api": {
target: "https://other-server.example.com",
secure: false
}
}
他的原理就是,服务器之间的通信是没有同源限制的,让本地服务器充当一个代理服务器的角色,帮组我们向目标服务器获取数据。因为我们在本地开发的时候,我们的代码运行在本地服务器之上,所以我们向本地服务器发送请求是不跨域的,我们就可以实现跨域了。
localStorage实现跨(同域)标签页通信。
window.addEventListener('storage', function (event) {
console.log(event.key, event.newValue);
});
cookie来实现,设置 domain
path
,例如在 two.example.com
和 example.com
之间共享
Set-Cookie: name = value, domain = example.com, path = /;
作者:holyZheng 转载请注明出处
了解几个跨域的方案,并且通过简单实践进行体会。
如何实践?
但是,我们如何进行实践呢?在哪发请求?向什么服务器发请求?很简单,就在当前网页,打开控制台,输入请求的代码
那么我们就可以以当前页面url作为origin,向http://127.0.0.1:8888/ ,发送请求GET请求了。 同时在本地创建一个node服务
这样我们就有服务器了,你可以很轻松的跟着这遍文章来实践了,然后从当前网页发送get请求到本地服务,理所当然跨域了。
1. cors
cors(跨域资源共享 Cross-origin resource sharing),它允许浏览器向跨域服务器发出XMLHttpRequest请求,从而克服跨域问题,它需要浏览器和服务器的同时支持。
简单请求
正如上方的例子便是一个简单请求
如何解决此案例的跨域问题呢?
*
来指定所以域名。后端动起来:http.createServer(function (request, response) {
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');
毫无意外的报错
在进行非简单请求的时候,浏览器会先发送一次OPTION请求来“预检”(preflight)该请求是否被允许,请求头中会通过
Access-Control-Request-Method
,Access-Control-Request-Headers
来告诉服务器我需要用到的方法和字段,服务器通过返回的头部信息中的Access-Control-Allow-Origin
,Access-Control-Allow-Method
来告诉浏览器该跨域请求是否被允许。修改后端代码:可以看到浏览器会先发送一个预检
当确认允许跨域之后,以后再发送该请求,就会省去预检处理,之间当作简单请求来操作。很明显,修改了后端代码后,这次的put请求时成功的。这里就不继续上图了。
cors总结
cors(跨域资源共享 Cross-origin resource sharing),它允许浏览器向跨域服务器发出XMLHttpRequest请求,从而克服跨域问题,它需要浏览器和服务器的同时支持。
Access-Control-Allow-Methods
,Access-Control-Allow-Headers
,Access-Control-Allow-Origin
等字段,指定允许的方法,头部,源等信息。2. jsonp
jsonp的原理就是利用就是利用
script
标签没有跨域限制,可以通过script
标签的src属性发送GET
请求。我们继续尝试,先把后端有关跨域的设置去掉,并重启服务打开我们的控制台输入一下代码,利用script标签进行jsonp请求
可以看到,后端正常的返回了
而且该请求为
GET
请求但是我们现在只是成功发送了一个跨域请求,但是我们不像XMLHttpRequest那样可以在res.responseText中拿到数据,通过jsonp我们该怎么拿到请求的数据呢?方法就是前后端约定一个callback字段名,来传递函数名,前端通过该函数来拿到数据。前端代码修改为:
通过callback字段来传递函数名onBack,后端代码修改为
重启后端服务,并且在控制台输入代码,可以看到结果:
我们拿到了数据,并且通过onBack函数将他输出到了控制台上!
总结
script
标签没有跨域限制的特点,通过script
标签的的src属性发送GET
请求。jsonp和cors比较