什么是浏览器的跨域问题

注意：

---

前言

在了解什么是跨域问题之前，我们首先要清楚几个概念：同源请求、异源请求、浏览器的同源策略

---

一、浏览器的同源策略

浏览器出于安全考虑，对同源请求放行，对异源请求限制，这些限制规则统称为同源策略
因此限制所造成的开发问题，称之为跨域（异源）问题

跨域只会在浏览器的范畴内才会出现
跨域问题：

1.同源请求和异源请求

源 = 协议 + 域名 + 端口
同源请求：页面源和目标源是同源的，页面源向目标源发送网络请求（图片、Ajax）
异源请求：页面源和目标源不是同源的，页面源向目标源发送网络请求（图片、Ajax）

2.同源策略

浏览器如何限制？
① 对标签发出的跨域请求轻微限制
② 对Ajax发出的跨域请求严厉限制
浏览器向服务器发出Ajax请求：
正常发出请求 —> 服务器作出响应 —> 浏览器检验规则（CORS机制），对响应进行校验
通过：正常交付，浏览器获取响应结果
未通过：引发错误，跨域问题

二、跨域解决方案

1.CORS 方案

使用CORS方案的前提：必须保证服务器是【自己人】
CORS是一套机制，用于浏览器检验跨域请求
它的基本理念是：
只要服务器明确表示允许，则检验通过
服务器明确拒绝或没有表示，则校验不通过

1.CORS将请求分为两类

① 简单请求
● 请求方法为：GET、HEAD、POST
● 头部字段满足CORS安全规范，详见W3C
● 请求头的Content-Type为
text/plain
multipart/form-data
application/x-www-form-urlencoded
② 预检请求
非简单请求 带有Preflight

2.具体实现

1.简单请求
浏览器 在发送请求的时候，会自动带上请求头
Origin: 页面源地址（跨域请求的发送方）
服务器 发出响应的时候，配置响应头
Access-Control-Allow-Origin: 页面源地址（允许通过的地址）
Access-Control-Allow-Origin: * （都允许通过）
2.预检请求
① 浏览器不会直接发送请求，而是先进行询问
浏览器 发送预检请求，请求方法为 OPTIONS，会带有以下三个部分
Origin: 页面源地址
Access-Control-Request-Method: POST（请求方法）
Access-Control-Request-Headers: a,b,content-type（修改了哪些请求头）
服务器 进行响应
Access-Control-Allow-Origin: 页面源地址（允许通过的地址）
Access-Control-Allow-Method: POST（允许通过的请求方法）
Access-Control-Allow-Headers: a,b,content-type（允许的请求头包含）
Access-Control-Max-Age: 86400（在86400s以内，只要来自该页面源的请求不需要重复询问了，缓存）
② 发送真实请求
和简单请求一致

2.JSONP 方案

使用JSONP方案的前提：必须保证服务器是【自己人】
没有CORS的年代 JSONP是解决跨域问题的古老方案
同源策略中，对标签的跨域请求限制较小，JSONP利用了这一点
浏览器
创建script元素发送跨域请求
准备一个回调函数 function callback(res){}
服务器
服务器响应后会运行该函数，并传递响应数据给参数 callback(响应数据)

2.Proxy代理服务器 方案

如果服务器不是【自己人】
找一个【中间人】 — Proxy代理服务器 脱离了浏览器就没有跨域问题了
浏览器
1.发送跨域请求（向代理服务器）
proxy代理服务器
2.转发请求（向target服务器）
4.再将响应结果返回给浏览器
此时若出现跨域问题，可通过CORS/JSONP解决，因为代理服务器是【自己人】
target服务器
3.返回响应结果（返回给代理服务器）

三、面试技巧

什么是跨域问题？

浏览器出于安全考虑，对同源请求放行，对异源请求限制，这些限制规则统称为同源策略
因此限制所造成的开发问题，称之为跨域（异源）问题
跨域只会在浏览器的范畴内才会出现
解决跨域的方法主要有三种：
① CORS 方案：CORS是一套用于浏览器检验跨域请求的机制。只要服务器明确表示允许，则检验通过；服务器明确拒绝或没有表示，则校验不通过，可以通过配置服务器的响应头Access-Control-Allow-Origin: * 来允许访问。
② JSONP方案：利用了对标签的跨域请求限制较小这一特点。浏览器创建script元素来进行跨域请求，准备一个回调函数；服务器接收到请求后就会调用该函数，并把响应数据作为参数传进去。
③ Proxy代理服务器：利用服务器之间的通信没有跨域问题这一点。浏览器发送跨域请求时，会发送到代理服务器，代理服务器再将请求发送到目标服务器；目标服务器接收作出响应，将响应数据发送给代理服务器，代理服务器再将结果发给浏览器。

---