这两天在看前端常见的一个问题—跨域
跨域的问题的出现是因为浏览器的同源策略，限制了同一个源的脚本如何与另一个源进行交互。同源：协议，域名，端口号都相同。
同源策略限制的行为：
1、cookie和localstorge无法获取
2、DOM和JS对象无法获取
3、Ajax请求发不出去
跨域请求的方式
原理：<script标签的src属性不受跨域的限制，可以动态生成script标签，src属性携带请求网址与回调函数发送到服务器，服务器返回数据。
客户端所在端口
设置静态文件的目录，并且静态文件端口为90
我要评论var app = express();
app.use(express.static(__dirname))
app.listen(90);
在所在90端口请求91端口的数据，在html中定义一个本地的函数放在src请求参数的callback中
<h1>我是客户端</h1>
<script>
function f(data){
console.log(data)
}
</script>
<script src = "http://localhost:91?callback=f"></script>
服务器端口91
var app3 = express();
app3.get('/',(req,res)=>{
var funcname = req.query.callback;
let data = {
code:0,
message:"hello jsonp"
};
res.send(`${funcname}(${JSON.stringify(data)})`)
})
app3.listen(91,()=>{
console.log("ok");
})
2、CORS跨域资源共享
使用自定义的HTTP头部让浏览器与服务器进行沟通，决定响应是成功还是失败。使用cors的关键是服务器，服务器实现cors接口，就可以跨源。
所有cors发送请求会预先发送options试探性请求，服务器接受直接返回客户端成功，再进行请求。
普通跨域请求：服务器端设置Access-Control-Allow-Origin，接受域名的请求，为*或者某个网址。
带cookie的请求：xhr.withCredentials = true;前后端都需要进行配置
3、postMessage
postMesage是H5提供的API,可以解决跨域操作的window属性
启动两个server服务支持a,b页面
var express = require('express')
var app1 =express();
app1.use(express.static(__dirname));
app1.listen(1001,()=>{
console.log("a准备")
});
var express = require('express')
var app2 = express();
app2.use(express.static(__dirname))
app2.listen(1002,()=>{
console.log("b准备")
})
a页面在端口1001，b端口在1002，a向b端口通过postMessage发送信息，通过onmessage接收返回的数据。
<h1>我是A页面</h1>
<iframe id = "iframe" src = "http://localhost:1002/b.html" style="display: none;"></iframe>
<script>
var iframe = document.getElementById("iframe");
//当前加载完毕
iframe.onload = function(){
var data = {
name:"soda"
};
iframe.contentWindow.postMessage(JSON.stringify(data),"http://localhost:1002/b.html")
};
window.onmessage = function(ev){
console.log(ev.data);
}
// window.addEventListener('message',function(e){
// alert("data from b" + e.data)
// },false)
</script>
b页面
<h1>我是B页面</h1>
<script>
window.onmessage = function(ev){
console.log(ev.data);
ev.source.postMessage(ev.data+"@",ev.origin)
}
</script>
4、Nginx反向代理
跨域原理：同源策略是浏览器的安全策略，不是http协议的一部分。服务器端调用HTTP接口只是http协议，不会执行js脚本，不需要同源策略，不存在跨域。
实现：nginx配置一个代理服务器做一个跳板，域名与domain1相同，反向代理domain2，并且可以顺便修改cookie的domain信息，方便当前域的Cooke写入。
5、Nodejs中间件做代理跨域
启动一个代理服务器，实现数据的转发。
本文地址：https://blog.csdn.net/mx_is_bang/article/details/107444610
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论