浏览器跨域问题

陈坚强

已于 2023-02-24 16:15:31 修改

阅读量975

点赞数 2

文章标签：前端网络

于 2022-11-06 16:11:47 首次发布

本文链接：https://blog.csdn.net/weixin_43611411/article/details/127705524

版权

1.同源策略

同源策略是一种约定，是浏览器最核心也是最基本的安全功能。可以说Web是构建在同源策略基础之上的，浏览器之上针对同源策略的一种实现。

同源：协议，域名，端口号都相同的才称为“同源”。

同源策略用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互，能帮助阻隔恶意文档，减少可能被攻击的媒介。是浏览器行为，保护本地数据不被JavaScript代码获取回来的数据污染，拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但无法被浏览器接受。

同源策略限制的有：

1.无法读取非同源网站的Cookie、LocalStorage、IndexDB。

2.无法接触非同源网页的DOM。

3.无法想非同源地址发送AJAX请求。

2.跨域问题及解决

跨域问题：

因为有同源策略的限制，会产生跨域问题，即指不同源的脚本在数据交互时，会报错。

解决途径有如下：

2.1JSONP

特点：请求方式只能是GET请求，简单。

思路：网页通过添加一个<script>元素，通过src属性向服务器发送query信息，query携带在客户端定义的函数。服务端在收到请求后，接受其函数，并在将数据作为其回调函数的参数，返回给客户端处理。

2.2CORS

跨资源共享W3C标准，需要浏览器和服务器同时支持。

在跨域中请求分为简单请求（普通HTML Form在不依赖脚本的情况下可以发出的请求）和非简单请求（需要先发起预检请求）。

为什么区分简单请求和非简单请求？

因为浏览器任务简单请求是安全的，所以可以通过跨域限制到达服务器，即无需对简单请求做预检请求。

对于非简单请求为什么要先发起一个预检请求给服务器？

跨域限制指对于请求来说，请求可以发出，但是请求响应回来的数据不被接收。但是请求已经发生，难免对服务器进行了数据操作。为避免这种情况，对于非简单请求需要首先发起预检请求，检测是否能发起真正的请求。（对于简单请求，浏览器认为其是安全的，无需发起预检请求）

预检请求的作用：询问服务器，当前网页所在的域名是否在服务器的许可名单中，以及可以使用哪些请求方法和头信息字段，获取到肯定的答复，浏览器才会发起正式的XMLHttpRequest请求，否则报错。

CORS过程

一、简单请求

浏览器直接发起CORS请求，就是在头信息中，增加一个Origin字段（说明本次请求来自哪个源）。

若指定域不在许可范围内，服务器返回一个正常的HTTP回应，不包含Access-Control-Allow-Origin字段，浏览器发现之后会抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。其错误无法通过错误码识别，因为状态码可能是200。

若指定域在许可范围内，服务器返回的HTTP回应含以下头信息字段：

Access-Control-Allow-Origin:xxx 当字段值为*时，表示接受任何域名的请求。

Access-Control-Allow-Credentials：true/false 可选值，表示是否允许发送cookie。（默认情况下，cookie不包含在CORS请求中）为true，表示服务器允许cookie包含在CORS请求中。若服务器不需要cookie，删除该字段即可。

Access-Control-Expose-Headers：xxx 可选值，表示可以用getResponseHeader(‘字段名’)方法获取到的头信息字段。原XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段。

！注意：当CORS请求要携带cookie发送到服务器时，一方面需要服务器同意（Access-Control-Allow-Credentials：true）；另一方面开发者需要在AJAX请求中设置withCredentials属性（xhr.withCredentials = true）否则就算服务器允许发送cookie，浏览器也不会处理。有些时候虽未设置withCredentials，但有些浏览器还是会一起发送cookie，这是可以设置withCredentials属性为false，显式关闭。

要发cookie，Access-Control-Allow-Origin不能设置为*，需指定明确的与请求网页一样的域名。

二、非简单请求

对服务器有特殊要求的请求，如请求方法是PUT/DELETE，或是Content-Type字段类型是application/json。

在正式请求前，会增加一次“预检”请求。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单中，以及可以使用哪些请求方法和头信息字段。确定之后，当判断正确，才会根据返回的信息发送请求。

预检请求的请求方法是OPTIONS，会携带以下字段：

1.Origin：请求来自哪个域。

2.Access-Control-Request-Method：列出浏览器CORS请求会用到哪些HTTP请求。

3.Access-Control-Request-Headers：列出浏览器CORS请求会额外发送的头信息字段，有多个时，用逗号隔开。

服务器收到预检请求后，检查上诉上个字段，确认允许跨域请求，作出回应

若服务器否定了预检请求，会返回一个正常的HTTP响应（无任何与CORS相关的头信息字段），浏览器识别服务器不同意请求时，错误会被XMLHttpRequest的onerror回调函数捕获。

若服务器通过预检请求，会返回一个HTTP响应，包含如下字段：

1.Access-Control-Allow-Origin：允许的域

2.Access-Control-Request-Methods：返回服务器允许的所有请求方法，多个用逗号隔开

3.Access-Control-Request-Headers：返回服务器允许携带的所有头信息字段，多个用逗号隔开

4.Access-Control-Allow-Credentials：是否允许请求中携带cookie

5.Access-Control-Max-Age：可选值表示本次预检的有效期单位为秒在此期间，无需重新发送方预检请求进行预检

整个CORS通信过程，都是浏览器自动完成，无需用户参与，浏览器一旦发现AJAX请求请求跨域，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨域通信

CORS允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制

CORS跨域的特点：服务器代码需要添加一段解决跨域的代码，确保在特定源下的网页可以接受服务器请求的响应数据。

response.setHeader("Access-Control-Allow-Origin","*")

3.添加跨域访问的中间件

如gin框架，有开源的跨域访问中间件

在Express中，可以使用cors模块实现跨域访问

4.postMessage

HTML5引入的api，postMessage()允许来自不同源的脚本采用异步方式进行有效的通信，多用于窗口间数据通信。

eg.页面b通过iframe标签放入页面a，通过postMessage和onmessage实现相互通信

5.window.name

有三个html页面，a页面和b页面同域，c页面独立。第一步，a页面的iframe标签的src属性指向c页面地址。第二步，在a页面的iframe标签上定义一个onload方法，其作用是将src地址改为b页面地址。当a页面请求c页面时，c页面抛出一个window.name，这个方法在a页面访问b页面的时候仍然存在。