01 跨域请求

跨域:A域名的脚本加载了不是A域名的内容

1.1 同源策略

同源策略即A域名的脚本只能向A域名自己发请求。

同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。只要是协议,域名,端口中有任何一个不同,都被当作是不同的域。

浏览器禁止掉向其他域名发送的请求,其实是在请求回来的时候被禁掉的。

python的requests发请求,由于不是浏览器,所以不存在跨域的问题。

1.2 使用CORS解决跨域问题

服务端在返回的response header中设置Access-Control-Allow-Origin就可以开启CORS。 该属性表示哪些域名可以访问资源,如果设置通配符*则表示所有网站都可以访问资源。

这是我们客户端的js

let xhr = new XMLHttpRequest();
xhr.open("get", "http://192.168.0.120:3000/", true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
}

在发请求时,XHR会自动加上js代码的域,我们这里是Origin: http://localhost:52331。服务端用node。在头部中,我们手动设置了'Access-Control-Allow-Origin':'http://localhost:52331',值就是我们Origin中js代码的域。这样域名http://localhost:52331下的js脚本就可以去请求域名http://192.168.0.120:3000/中的内容了。

const http = require('http');
const hostname = '192.168.0.120';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:52331' );
res.end('You get from ME!!!!\n');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});