一. 什么是跨域?

出于安全考虑，浏览器限制页面脚木发起跨域请求，所以XMLHttpRequest和fetch API是遵循同源策略的。

例如，在http://domain-a.com 页面用XMLHttpRequest向http://domain-b.com 发起HTTP请求，这就是跨域。

补充:CSS、JS和图片等静态资源是不受同源策略限制的。

二. 为什么要限制跨域?

如果没有跨域限制，很容易发生下面这种情况:

首先，用户登陆银行网站https://www.bank.com, 返回用户认证信息并存在cookie。
然后，用户打开恶意网站http://www.hacker.com, 网页向https://www.bank.com 发起http请求。
最后，银行网站取出cookie, 验证用户身份无误并返回数据，造成了数据泄露。

这是一个典型的CSRF攻击。黑客在恶意网页向第三方网站发送伪造请求，造成数据泄露等危害。

但有些场景是存在跨域的。例如,在前后端分离的网站(前后端域名不同)，前端网页怎么跨域请求后端服务呢?

三. 怎么实现跨域访问控制?

为了保证安全地进行跨域资源共享，就有了CORS机制，它允许服务器对跨域请求进行访问控制。

首先，把请求分为两类: simple request 和preflight request, 两者区别在于后者对服务器有副作用。

simple request:

在XMLHttprequest出现之前，就已经有<form>与服务器进行数据交互。

类似<form>的称为simple request, 必需满足以下两点:

HTTP Method为: GET、 POST、 HEAD。

HTTP Header 为:

Accept、 Accept - Language、Content -Language。
Content-Type: text/plain、multipart/ form-data、application/x-www-form-ur lencoded。
Range:只允许简单的范围值，例如bytes=256-。
没有使用ReadableStream对象。

simple request使用origin和Access-Control-Allow-Origin来完成访问控制。

浏览器请求时带上origin (HTTP Header), 表示请求来源。

服务器响应时返回Access-Control-Allow-Origin (HTTP Header), 表示允许访问的源。

浏览器判断请求源origin是否在服务器允许访问的范围内Access-Control-Allow-origin,如果不在范围内，则返回失败。

preflight request :

如果请求对服务器有副作用，浏览器会先用OPTIONS方法发送一个preflight request，检查服务器是否允许跨域请服务器确认允许之后，浏览器才发起实际请求。避免跨域请求对服务器数据造成未预期的影响。

第一次OPTIONS请求:

origin: 请求源。
Access-Control-Request-Method: 跨域请求的HTTP Method
Access-Control-Request-Headers: 跨域请求的HTTP Headers

对应响应:

Access-Control-Allow-Origin: 允许跨域的源。
Access-Control-Allow-Methods: 允许跨域的HTTP Method。
Access-Control-Allow- Headers: 允许跨域的HTTP Headers。

浏览器根据prefight request的请求和响应报文进行判断，如果服务器允许跨域，就发起真实请求，否则返回失败。

总结

一次跨域请求过程一般如下:

浏览器发起请求，origin和host 不同就会触发CORS机制，并自动带上origin。

服务器收到请求，根据实际的跨域访问控制需要，返回允许跨域的源。

浏览器收到响应，判断请求源不在服务器允许的范围内，则返回失败。

对服务器有副作用的跨域请求，浏览器会先发一个预检查请求，检查服务器是否允许跨城。

服务器确认允许之后，浏览器才发起实际请求。避免跨城请求对服务器数据造成未预期的影响。

浏览器跨域访问控制(CORS)相关推荐

Ajax 浏览器跨域访问控制
2019独角兽企业重金招聘Python工程师标准>>> jsonp+ajax实现浏览器跨域通信的原理解析 php+ajax+P3P实现多域名跨域登录一.关于跨域需要设置的响应头消息 ...
浏览器跨域服务器响应了吗,浏览器跨域问题之HTTP跨域响应头 | kTWO-个人博客
摘要本篇文章主要讲解HTTP中的几种响应头,解决web开发中常见的浏览器跨域问题CORS,主要包括了四个HTTP响应报文中的四个字段,同时讲解了如何携带cookie进行跨域. 0x01 浏览器跨域 ...
php跨域资源共享,CORS 跨域资源共享
CORS (Cross-Origin Resource Sharing) 跨域资源共享为什么需要 CORS 首先,跨域指的是同一个域名下的资源,同时要注意域名与子域名,比如 developers.e ...
网络-HTTP请求跨域访问控制
本文根据MDN整理我不说什么是跨域,网上很多,但是要说一下,跨域访问控制这个概念,是浏览器的行为,不是服务器的行为(虽然不少工作都是后端的工程师去配置),产生跨域访问控制的原因有两个: 1.前端发出 ...
跨域-(jsonp cors)
同源策略它是由NetScape提出的一个著名的安全策略. 浏览器执行js,会检查它属于哪个页面,如果不是同源页面,不会被执行. 由于浏览器的同源策略,只要发送请求url与页面地址有不同的即为跨域.只要 ...
Spring全家桶-Spring Security之跨域与CORS与防护
Spring全家桶-Spring Security之跨域与CORS Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以 ...
记录关于浏览器跨域和设置默认浏览器的问题
@Author:Runsen 当你使用ajax访问本地的json文件的时候,就会报from origin 'null' has been blocked by CORS policy: Cross o ...
跨域资源共享CORS详解
最近深入了解了CORS的相关东西,觉得阮一峰老师的文章写得最详细易懂了,所有转载作为学习笔记. 原文地址:跨域资源共享 CORS 详解 CORS是W3C的一个标准,全称是跨域资源共享(Cross-or ...
浏览器跨域访问解决方案
浏览器跨域访问解决方案 2015年11月4日 18972次浏览跨域的概念跨域大家都知道,不同地址,不同端口,不同级别,不同协议都会构成跨域.例如:about.haorooms.com和www.ha ...

浏览器跨域访问控制(CORS)