我们知道如果你在浏览器上打开了一个网页,然后试着去请求另一个站点的资源,一般来说,Javascript并不会拿到想要的结果,浏览器会在控制台把提示信息标红。
那么浏览器为何会这样做呢?我们来看一下在浏览器不限制跨域的情况下,用户的一系列操作可能会发生什么事情。
首先用户打开一个在线文件存储网站http://www.file.com并成功登陆,服务器将登陆凭证写入cookie并返回到浏览器。
然后用户打开了另一个网站http://www.hacker.com,但是hacker的网页中埋了一条发送到file.com的请求,因为浏览器访问file.com,于是刚才生成的那个cookie就被hacker利用了。hacker发送的请求有可能是清空file中的所有文件。然而发生的这一切的过程,用户并不能感知到。这也是就是CSRF(Cross-site request forgery)跨站请求伪造。
如果确实有跨域需求,CORS(Cross-origin Resource Shearing )跨域资源共享,是个不错的选择。只要服务器实现CORS接口,就可以实现前后端跨域通信。
Response Header
Access-Control-Allow-Origin: | * origin,参数的值指定了允许访问该资源的外域URI,如果请求不需要身份凭证,可以用星号*,所有域都可以请求
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header XMLHttpRequest对象的getResponseHeader可以拿到Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma这些基本头的其他自定义头。
Access-Control-Max-Age, 决定预请求到的结果可以缓存多长时间
Access-Control-Allow-Credentials, js的请求中,如果credentials:"include", 则浏览器会根据这个返回字段决定是否要把服务器的respond返回给前端Javascript,true:返回;false:不返回
Access-Control-Allow-Methods, 跨域允许使用到的方法
Access-Control-Allow-Headers, 规定了跨域时允许携带的首部字段。
Request Header
Origin: 说明请求发起的来源
Access-Control-Request-Method 实际请求时,需要使用的方法
Access-Control-Request-Headers 实际跨域请求时,会携带的请求头字段