前后端分离,求n种解决跨域的问题的方法。
1.ajax的data属性为jsonp
2.设置代理或者反向代理
首先后台得允许跨域,否则前端怎么写都白搭
一. jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button type="submit">提交</button>
<script>
let btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
let scr = document.createElement("script");
scr.src = "http://127.0.0.1:3333/index";
document.body.appendChild(scr);
};
// 设置后台调用的方法,以便接收数据
function res(data) {
console.log(data);
}
</script>
</body>
</html>
const http = require('http')
let server = http.createServer((req, res) => {
if(req.url === '/index') {
res.write('res("后端返回的数据")')
}
res.end()
})
server.listen(3333, (err) => {
if(!err) {
console.log('服务器启动成功')
}
})
二.CORS解决跨域
"Access-Control-Allow-Headers": "*", //设置请求头
"Access-Control-Allow-Origin": "*", //允许携带哪个头访问,即允许前端设置的自定义头字段传递数据
"Access-Control-Allow-Methods": "*", //允许携带哪个方法访问,即允许所设置的请求方式请求
"Access-Control-Max-Age": "*", //可以设置Access-Control-Max-Age头来设置多少秒之内不发请求
三.WebSocket
let WebSocket = require("ws");
let wss = new WebSocket.Server({
port: 3333
});
wss.on("connection", function (ws) { //先连接
ws.on("message", function (data) { //用message来监听客户端发来的消息
console.log(data);
ws.send("我是后端数据");
})
})
四. 通过修改document.domain来跨子域
子域中无法获取父域的数据的时候就可以利用document.domain都设置成相同的域名就可以完成。但是要注意的是,document.domain的设置是有限制的,我们把document.domain设置成自身或者更高一级的父域,且主域必须相同。
例如:a.b.example.com中某个文档的document.domaiin可以设成a.b.example.com、b.example.com、example.com中的任意一个,但是不可以设成c.a.b.example.com,
因为这是当前作用于的子域,也不能设成baidu.com,因为主域已经不相同了。
五. 使用HTML5中新引入的window.postMessage方法来跨域传递数据
window.postMessage(message, targetOrgin)方法是html5新引进的特性,可以使用它来想其他的window对象发送消息,无论这个window对象是属于同源或者不同源,
目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
调用postMessage方法的window对象是指要接受消息的哪一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;
第二个参数targetOrgin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符*。
需要接收消息的window对象,可是通过监听自身的message时间来获取传过来的消息,消息内容存储在该事件对象的data属性中。
六. XDomainRequest
在ie8,9中,有XDomainRequest对象可以实现跨域请求。这个对象拥有onerror,onload,onprogress,ontimeout四个事件,
abort,open,send三个方法,contentType, responseText,timeout三个属性。具体参见XDomainRequest对象。