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用于所有
