什么是跨域?
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制
所谓同源是指,域名,协议,端口都相同。浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行
跨域的常见解决方法
首先明确一点,要解决跨域肯定是要服务端参与!!!
1.jsonp
需要目标服务器配合一个callback函数
2. window.name+iframe
需要目标服务器响应window.name
3. window.location.hash+iframe
同样需要目标服务器作处理
4. html5的 postMessage+iframe
这个也是需要目标服务器或者说是目标页面写一个postMessage,主要侧重于前端通讯
5. CORS
需要服务器设置header: Access-Control-Allow-Origin
6. Nginx反向代理
这个方法一般很少有人提及,但是他可以不用目标服务器配合,不过需要你搭建一个中转nginx服务器,用于转发请求
1~4 基本上比较少使用,下面主要介绍CORS
和Nginx反向代理
CORS
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)
整个CORS
通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS
通信与同源的AJAX
通信没有差别,代码完全一样。浏览器一旦发现AJAX
请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现CORS
通信的关键是服务器。只要服务器实现了CORS
接口,就可以跨源通信
请求的分类
浏览器将CORS
请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)
只要同时满足以下两大条件,就属于简单请求:
- 请求方法是三种方法之一:
HEAD
GET
POST
- HTTP的头信息不超出几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
:只限于三个值application/x-www-form-urlencoded
multipart/form-data
text/plain
这是为了兼容表单(form),因为历史上表单一直可以发出跨域请求。AJAX
的跨域设计就是,只要表单可以发,AJAX
就可以直接发
简单请求
对于简单请求,浏览器直接发出
CORS
请求。具体来说,就是在头信息之中,增加一个Origin
字段
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
上面的头信息中,Origin
字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求
如果Origin
指定的源,不在许可范围内,服务器会返回一个正常的HTTP
回应。
浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin
字段,就知道出错了,从而抛出一个错误,被XMLHttpRequest
的onerror
回调函数捕获。
注意,这种错误无法通过状态码识别,因为HTTP
回应的状态码有可能是200
如果Origin
指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段:
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时
Origin
字段的值,要么是一个*,表示接受任意域名的请求Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值,表示是否允许发送
Cookie
。默认情况下,Cookie
不包括在CORS
请求之中。设为true
,即表示服务器明确许可,Cookie
可以包含在请求中,一起发给服务器。这个值也只能设为true
,如果服务器不要浏览器发送Cookie
,删除该字段即可Access-Control-Expose-Headers
该字段可选。
CORS
请求时,XMLHttpRequest
对象的getResponseHeader()
方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma
。如果想拿到其他字段,就必须在Access-Control-Expose-Headers
里面指定withCredentials 属性
CORS
请求默认不发送Cookie
和HTTP
认证信息。如果要把Cookie
发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials
字段
另一方面,开发者必须在AJAX
请求中打开withCredentials
属性
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
否则,即使服务器同意发送Cookie
,浏览器也不会发送。或者,服务器要求设置Cookie
,浏览器也不会处理
需要注意的是,如果要发送Cookie
,Access-Control-Allow-Origin
就不能设为星号,必须指定明确的、与请求网页一致的域名。
同时,Cookie
依然遵循同源政策,只有用服务器域名设置的Cookie
才会上传,其他域名的Cookie
并不会上传,且(跨源)原网页代码中的document.cookie
也无法读取服务器域名下的Cookie
非简单请求
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是
PUT
或DELETE
,或者Content-Type
字段的类型是application/json
预检请求
非简单请求的CORS
请求,会在正式通信之前,增加一次HTTP
查询请求,称为”预检”请求(OPTIONS)
浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP
动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest
请求,否则就报错
下面是一段浏览器的JavaScript脚本
var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
浏览器发现,这是一个非简单请求,就自动发出一个”预检”请求,要求服务器确认可以这样请求。下面是这个”预检”请求的HTTP头信息
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
“预检”请求用的请求方法是OPTIONS
,表示这个请求是用来询问的。头信息里面,关键字段是Origin
,表示请求来自哪个源。
除了Origin
字段,”预检”请求的头信息包括两个特殊字段
- Access-Control-Request-Method
该字段是必须的,用来列出浏览器的
CORS
请求会用到哪些HTTP
方法,上例是PUT
- Access-Control-Request-Headers
该字段是一个逗号分隔的字符串,指定浏览器
CORS
请求会额外发送的头信息字段,上例是X-Custom-Header
预检请求的回应
服务器收到”预检”请求以后,检查了Origin
、Access-Control-Request-Method
和Access-Control-Request-Headers
字段以后,确认允许跨源请求,就可以做出回应
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
上面的HTTP回应中,关键的是Access-Control-Allow-Origin
字段,表示http://api.bob.com
可以请求数据。该字段也可以设为星号,表示同意任意跨源请求
Access-Control-Allow-Origin: *
如果服务器否定了”预检”请求,会返回一个正常的HTTP
回应,但是没有任何CORS
相关的头信息字段。
这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被XMLHttpRequest
对象的onerror
回调函数捕获。控制台会打印出如下的报错信息
XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.
服务器回应的其他CORS相关字段如下:
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
- Access-Control-Allow-Methods
该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求
- Access-Control-Allow-Headers
如果浏览器请求包括
Access-Control-Request-Headers
字段,则Access-Control-Allow-Headers
字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在”预检”中请求的字段 - Access-Control-Allow-Credentials
该字段与简单请求时的含义相同
- Access-Control-Max-Age
该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求
浏览器的正常请求和回应
一旦服务器通过了”预检”请求,以后每次浏览器正常的CORS
请求,就都跟简单请求一样,会有一个Origin
头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin
头信息字段
PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
上面头信息的Origin
字段是浏览器自动添加的
下面是服务器正常的回应:
Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8
上面头信息中,Access-Control-Allow-Origin
字段是每次回应都必定包含的
Nginx反向代理
简单来说就
Nginx
根据URI
中的某个标识,把请求代理到后端服务器去处理,因为是同源所以也就不用像CORS
那样,效率很高
我们只需要配置nginx,在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。这样,这个服务器上所有url都是相同的域名、协议和端口。
因此,对于浏览器来说,这些url都是同源的,没有跨域限制。而实际上,这些url实际上由物理服务器提供服务。这些服务器内的javascript可以跨域调用所有这些服务器上的url
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 9000; #配置第一台服务器
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
#alias D:\\develop\\project1dir\\app\\; #配置别名到项目源代码目录,那么访问http://localhost:9000/即访问此目录
# Frontend Server
proxy_pass http://localhost:8001/; #更聪明的做法是代理到前端服务器地址,比如gulp+browser-sync开启的服务器,能看到代码实时更新效果
}
location /api/ {
rewrite ^/api/(.*)$ /$1 break; #所有对后端的请求加一个api前缀方便区分,真正访问的时候移除这个前缀
# API Server
proxy_pass http://www.serverA.com; #将真正的请求代理到serverA,即真实的服务器地址,ajax的url为/api/user/1的请求将会访问http://www.serverA.com/user/1
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
}
其他跨域方法
使用postMessage进行Iframe跨域通信
JSONP跨域详解
iframe跨域的几种常用方法
References
http://www.ruanyifeng.com/blog/2016/04/cors.html
https://segmentfault.com/a/1190000010197683