跨域的原因主要是同源政策的影响，所谓同为政策就是需要页面服务器协议，端口，域名都一样。注意：子域不同，也叫跨。
当客户端向服务端发送请求后，服务端接受到请求，并返回相应的数据给客户端。举例客户端为浏览器，当客户端接收到服务端返回的数据的时候，根据Netscape公司提供的安全策略——同源策略，会判定客户端与服务端的协议、端口和域名是否一致，如果一致，才能够将数据给客户端的脚本，也就是js代码才能接受到数据。
注意：跨域能返回到浏览器，并且能在控制台preview看到结果，但是不能返回到js脚本。
一. jsonp
- 目的:可以让所有的人都能去访问 慎用
- 原理:超链接(href) 表单(action) 图片(src) script(src) 不考虑跨域问题,用服务器地址代替路径
- 使用方法:
1)服务端配合前端,res.wirte()写前端规定的函数名
2)前端发送数据时,发送回调函数,服务端处理数据后,直接执行函数名
服务器代码
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('服务器启动成功')
}
})
html代码
<!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>
测试效果
二.CORS解决跨域
CORS即“跨域资源共享”，这是一种最常用的跨域实现方式，一般需要后端人员在处理请求数据的时候，添加允许跨域的相关请求头信息。大致思路是这样的：首先获取请求对象的信息，比如Origin字段，通过预先配置的参数判断请求是否合法，然后设置相应对象response的头信息，实现跨域资源请求
"Access-Control-Allow-Headers": "*", //设置请求头"Access-Control-Allow-Origin": "*", //允许携带哪个头访问，即允许前端设置的自定义头字段传递数据"Access-Control-Allow-Methods": "*", //允许携带哪个方法访问，即允许所设置的请求方式请求"Access-Control-Max-Age": "*", //可以设置Access-Control-Max-Age头来设置多少秒之内不发请求"Access-Control-Max-Age": "*", //可以设置Access-Control-Max-Age头来设置多少秒之内不发请求"Access-Control-Allow-Credentials": true, //允许携带cookie、authorization等，及携带凭证请求头。即响应头表示是否可以将对请求的响应暴露给页面。
服务端
const http = require("http");
let server = http.createServer((req, res) => {
res.writeHead(200, {
"Access-Control-Allow-Headers": "*",
"Access-Control-Allow-Origin": "*",
});
if (req.url === "/index") {
res.write("收到请求");
}
res.end();
});
server.listen(3333, (err) => {
if (!err) {
console.log("服务器启动成功");
}
});
html
<!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 src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
axios({
method: 'get',
url: 'http://127.0.0.1:3333/index'
}).then(res => {
console.log(res)
})
};
</script>
</body>
</html>
三.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("我是后端数据");
})
})
html
<!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 socket = new WebSocket("ws://localhost:3333/index"); //ws协议是webSocket自己创造的
socket.onopen = function () {
socket.send("我是前端数据");
};
socket.onmessage = function (e) {
console.log(e.data);
};
};
</script>
</body>
</html>
前端展示
后端展示
四. 通过修改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对象。
XDomainRequest对象有很多限制，例如只支持get、post方法、不能自定义请求的header头、不能携带cookie、只支持text/plain类型的内容格式等等。具体参见XDomainRequest对象限制。
因此虽然XdomainRequest作为ie8、9中的一种跨域手段，但是适用的业务场景还是比较局限的。
网友评论