聊聊关于前端跨域

导读：在前端开发中经常会遇到跨域问题，通过同源策略和跨域产生的原因能有效地去合理地选择方案解决跨域问题。下面本文将从以下3个点展开讨论：

• 同源策略
• 限制的内容
• 解决跨域的方式

1.同源策略是什么？

同源策略是浏览器的一个安全功能。同源指的是协议、域名、端口 一致。同源的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。

例子：http://www.baidu.com/account/page.html

http://www.baidu.com/server/page2.html 协议、域名、端口一致---同源

http://www.example.com/account/page3.html 域名不同--不同源

2.同源策略限制了什么？

• DOM同源策略：禁止对不同源页面DOM进行操作。
• AJAX同源策略： 禁止向不同源的地址发起HTTP请求。
• 不同源之间Cookie、LocalStorage、IndexDB浏览器数据库无法互相读取。

3.绕过同源策略（跨域）的解决方法

解决跨域的方式有很多，下面主要分析以下两种：

• 代理（Nginx反向代理）
• CORS（跨来源资源共享）

3.1代理方式解决跨域问题

3.1.1 代理

解析：服务器之间不存在跨域的问题，当客户端需要获取非同源服务B的资源时可以通过请求同源服务器A，服务器A作为代理对请求进行转发给服务器B后将响应结果返回给客户端，解决了跨域问题。

3.1.2 Nginx反向代理

解析：通过Nginx反向代理配置将服务器A和服务器B的域名等配置为与客户端所在域名同源从而解决了跨域问题。配置方式如下

3.2 CORS跨来源资源共享

CORS需要浏览器和服务器同时支持，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。分为：简单请求、和非简单请求两种

3.2.1简单请求

• 请求方法为GET、POST
• 请求Header中无自请求定义头
• 请求Content-type为text/plain、multipart/form-data、application/x-www-form-urlencoded

当浏览器发送跨域请求，会自动在请求头中增加Orgion字段。服务器将根据Origion这个值，判断是否同意这次请求。浏览器也会去检查响应头中是否包含允许跨域的字段信息（Access-Control-Allow-Origin-允许的调用域、Access-Control-Allow-Method-允许跨域调用的方法）。如果存在，会判断允许的调用域中是否包含该次请求的域。如果回应的头信息没有包含允许跨域字段信息或者允许调用域不包含发起请求的域，浏览器会认为跨域调用失败。但HTTP回应的状态码有可能还是200。

3.1.2非简单请求：

• 请求方法为PUT、DELETE
• 请求Header中带有请求自定义头
• 发送JSON格式的ajax请求。 请求Content-type=application/json

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）又称"options请求"。预检请求的作用是询问网页所在的域名是否在即将请求的服务器许可名单之中（Origin），以及可以使用哪些HTTP动词和头信息字段（Access-Control-Allow-Headers ）。

服务器进行预检之后就会响应回客户端，客户端根据服务端的响应头进行判断，如果响应头里没有任何CORS相关的头信息字段或者不在区内，客户端就会认为服务器不同意预检请求跨域访问。

当"预检"请求通过了，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应也都会有一个Access-Control-Allow-Origin头信息字段。

4.总结

同源策略是同源策略是浏览器的一个保证用户信息的安全功能，当协议、域名、端口一致时才为同源。常见的跨域（绕过同源策略）的两种方式：代理和CORS（简单和非简单请求）。

5.结尾

感谢您的阅读，如果喜欢本文欢迎关注和转发，本头条号将持续分享IT技术知识。