WebSocket凭什么可以跨域？

Posted 2023-04-09

参考技术A

面试前复习WebSocket时注意到了很多开发时没有想到过的知识点，其中一个就是 WebSocket协议可以用来跨域 ，奇怪的是，明明AJAX和WebSocket都属于 跨域读 ，按理来说应该都受同源策略的限制，为啥WebSocket就不受他的限制呢？在网上查了一番资料，发现有人这样解释道：

原来WebSocket根本不附属于同源策略，而且它本身就有意被设计成可以跨域的一个手段。由于历史原因，跨域检测一直是由浏览器端来做，但是WebSocket出现以后，对于WebSocket的跨域检测工作就交给了服务端，浏览器仍然会带上一个 Origin 跨域请求头，服务端则根据这个请求头判断此次跨域WebSocket请求是否合法

Nginx配置websocket的反向代理

由于一般会有跨域问题，就直接把跨域也一并配置了。Nginx的跨域配置详情可以参考我之前的文章：Nginx配置跨域请求

websocket的反向代理配置：

直接贴代码：

server {
    listen 9000; # 监听9000端口
    server_name   websocket_server;

    # 允许跨域
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods ‘GET, POST, OPTIONS‘;
    add_header Access-Control-Allow-Headers ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization‘;
    if ($request_method = ‘OPTIONS‘) {
        return 204;
    }

    location / {
        #添加wensocket代理
        proxy_pass http://127.0.0.1:9093;  # websocket服务器。不用管 ws://
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}