http中的跨域问题

1. 早期对跨域的理解:

以前对于跨域的认识很肤浅,仅仅停留在"我在浏览器输入了一个域名,那么浏览器出去安全性的考虑,不允许在代码中去访问其他的域名",这种限制的出发点来源于早期互联网的网络木马攻击,当时的黑客经常会山寨一个知名网站,然后在网站中偷偷植入恶意链接,使用户在不知情的状态下请求这个链接,进而中毒,所以当时理解是浏览器厂商在请求中加入了跨域请求限制(Cross Origin Resource Sharing) (CORS), 代码中想要访问与浏览器地址栏中地址不同的域名,浏览器将予以拦截(这种理解是不对的).

2. 反向代理

后来使用过阿里云服务,也配置过Nginx,其实很简单,就是在响应数据的header中加一行Access-Control-Allow-Origin *就好了,但在服务端的配置经历, 让我当时意识到并不是浏览器将跨域请求拦截了,而是服务端收到了跨域请求,也返回了,只是浏览器拿到响应之后发现没有Access-Control-Allow-Origin配置把响应丢弃而直接报错了(这种理解依然不对).

Nginx的跨域配置其实就是一次代理转发, 收到前端请求包后, 层层解析,到应用层,找到目标地址,然后根据设置好的规则将目标地址替换,将目标的跨域域名改成同域的域名.类似下面这种

server {
            listen 8080;
            server_name www.123.com;
 
            location /mail/ {
                    proxy_pass http://qq.com:portmail/;
            }
 
            location /com/ {
                    proxy_pass http://qq.com:4444/main/;
            }
 
            location / {
                    proxy_pass http://qq.com;
            }
    }

这里就是将http://www.123.com:8080发出的请求按照配置的规则转发,下面是转发示例:

    http://www.123.com:8080/mail/index.html -> http://qq.com:portmail/index.html
    http://www.123.com:8080/com/index.html -> http://qq.com/main/index.html
    http://www.123.com:8080/mail/static/a.jpg -> http://qq.com:portmail/static/a.jpg
    http://www.123.com:8080/com/static/b.css -> http://qq.com/main/static/b.css
    http://www.123.com:8080/other/index.htm -> http://qq.com/other/index.htm

3. 彻底理解跨域

最近在跟着项目组开发嵌入式前端, 服务器和前端都需要手写, 手工配置, 后端开始使用的是goahead服务器,因为性能问题又架设了httplib库用作数据服务器,goahead仅作为静态资源,这样前端就存在跨服务器调用的情况,就有了跨域问题,而在调试过程中,发现前端的请求有时候会收的到,有时候会收不到,有时候会发送两个.我在查阅了大量资料后,得出如下结论:

http请求中分为简单请求和复杂请求,他们的划分标准是根据是否会对服务器造成损害.

• 简单请求
  简单请求的方法必须是GET，HEAD，POST中的一个, Content-Type必须是application/x-www-form-urlencoded
  , multipart/form-data, text/plain中的一个.简单请求,只会按照既定的解析方式来解释数据,不会对服务器造成损害. 浏览器会直接发送,不做检查,即使是跨域请求也不会拦截,然后浏览器会根据服务器返回的Access-Control-Allow-Origin或Access-Control-Allow-Headers来判断是否丢弃.简单请求只会请求一次

• 复杂请求
  复杂请求是除GET，HEAD，POST之外的请求(比如put,delete等),或者Content-Type是非application/x-www-form-urlencoded, multipart/form-data, text/plain请求,或者在heades中携带非标准字段, 比如在我的项目中,就使用了application/json来表示数据,使用application/octet-stream来表示大文件数据,加入了X-Token字段来携带cookie. 那么这种格式的数据包,浏览器在发送之前,必须要和服务器进行一次预检(即发送一个method为OPTIONS的数据包),来询问服务器该数据包是否能解析,是否会构成威胁,在得到服务器肯定的答复(响应200)后才会将该数据包发出,如果得不到肯定的回复,这个请求就不会被发出,所以一个成功的复杂请求是有两个数据包发出的.

所以在配置和部署中,要配置一项关于预检请求的响应, 在Nginx这样写:

server
{
    listen 3002;
    server_name localhost;
    location /ok {
        proxy_pass http://localhost:3000;

        #   指定允许跨域的方法，*代表所有
        add_header Access-Control-Allow-Methods *;

        #   预检命令的缓存，如果不缓存每次会发送两次请求
        add_header Access-Control-Max-Age 3600;
        
        #   带cookie请求需要加上这个字段，并设置为true
        add_header Access-Control-Allow-Credentials true;

        #   表示允许这个域跨域调用（客户端发送请求的域名和端口） 
        #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
        add_header Access-Control-Allow-Origin $http_origin;

        #   表示请求头的字段 动态获取
        add_header Access-Control-Allow-Headers 
       'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,
        Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';

        #   OPTIONS预检命令，预检命令通过时才发送请求
        #   检查请求的类型是不是预检命令
        if ($request_method = OPTIONS){
            return 200;
        }
    }
}

这里的$http_origin并不是nginx的内置参数，nginx支持取自定义的参数值，$http_XXX这个格式是nginx取请求中header的XXX的值。这里取的是origin,而一般跨域请求都会将请求的来源放在origin中（浏览器会往跨域请求的header上面加origin这个header）origin和referer类似,都是说明最初请求是从哪里发起的,origin只用于post,referer用于所有