XHR跨域

之前虽然知道”跨域”这个词，也知道怎么给服务端加上”跨域”这一功能，但是一直不明白跨域是怎么回事，今天看了红宝书终于整明白了。

先说说请求的大概流程吧: 前端发送请求->后端收到请求->后端发送响应->前端收到响应。如果不跨域的情况下，前三步都没有问题，但是第四步会出现问题，导致第四步出现问题的原因是服务器的响应头中没有”Access-Control-Allow-Origin”或者”Access-Control-Allow-Origin”的信息与浏览器当前页面的Origin对不上。
先说说Origin是什么，Origin是一个请求头，其中包含了发送请求的页面的源(如:协议，网址，端口)，比如我在浏览器打开”http://localhost:5000/page"页面时发送一个请求，那么这个请求中的Origin值为"http://localhost:5000"。
知道了这一点后，我们再把目光转移到前端接收到后端响应这一过程，这时后端的响应已经发出去了，浏览器会根据响应头中的”Access-Control-Allow-Origin”中的值是否等于当前页面的Origin做出判断，如果”Access-Control-Allow-Origin”等于当前页面的Origin，那么会成功响应，这时就可以根据xhr对象的responseText方法来获取响应体了；如果”Access-Control-Allow-Origin”不等于当前页面的Origin，那么浏览器就会报错。

假设当前页面为”http://localhost:5500/try.html"，需要请求的后端接口为:"http://localhost:5000/test"，那么XHR请求的代码应该如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function sendXHR()
{
    let xhr = new XMLHttpRequest();
    // 接收完响应后在控制台打印响应体
    xhr.onreadystatechange = function()
    {
        if(xhr.readyState === 4)
        {
            console.log(xhr.responseText);
        }
    }
    xhr.open("get", "http://localhost:5000/test", true);
    xhr.send(null);
}

这里我用的python框架flask做的后端，后端的代码为:

1
2
3
4
5
6
7
8
9

@app.route('/test')
def test():
    with open("./log/share.log", "r") as f:
        data = f.read()
    res = make_response(data)
    // 设置响应头
    res.headers["Access-Control-Allow-Origin"] = "http://localhost:5500"
    return res

这样前端就能成功接收到响应了。
本篇完。真没想到原来是浏览器的锅。