前言:跨域原理解析以及解决方案
个人博客 已更新该文章— 跨域原理解析以及解决方案
1. 什么是跨域?
在 Web 应用中,浏览器使用同源策略(Same Origin Policy)来保护用户隐私和安全。同源是指 URL 的协议、端口号和主机名相同。同源策略禁止加载一个不同于当前文档来源的脚本、样式表或图像,也不能通过 AJAX 请求从另一个域名获取数据。
简单说来,当浏览器请求的资源的协议、子域名、域名、端口号中任意一个与当前页面地址不同的时候,就会发生跨域现象。
2. 分析造成跨域的原因是什么?
跨越现象并非一个 bug,而是 JavaScript 和浏览器的一个基本安全概念。跨域产生的原因主要有以下几种:
- 协议不同
- 域名不同
- 端口不同(协议和域名相同,端口不同也算跨域)
- 不同子域名(如
sub1.example.com
与sub2.example.com
,二级域名相同,但是前缀不同)
3. 如何解决跨域?
为了解决跨域问题,需要对后端和前端进行配置。以下是常见的几种解决方法:
3.1 CORS(跨域资源共享)
基于 HTTP 协议的一种跨域资源访问机制,设计目的是让 Web 应用服务器能够支持跨域访问,而不是浏览器前端。在服务端添加对应的响应头允许跨域访问。
HTTP Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: GET, POST
Access-Control-Max-Age: 86400
Access-Control-Allow-Origin
:设置被允许访问的来源地址或域名。 “*” 表示所有来源均可访问。Access-Control-Allow-Methods
:允许跨域请求的 HTTP 方法。Access-Control-Max-Age
:缓存预检请求的时间,单位为秒。在此期间内发送的请求将不再发送预检请求。
3.2 反向代理
前端与后台进行约定,在通过反向代理(如 Nginx)设置代理转发,使得 JavaScript 发送的AJAX 请求在同源策略下是无序考虑跨域问题的。
nginx location /api/ {
proxy_pass http://localhost:3000/;
}
3.3 JSONP JSONP 是一种常用的跨域解决方案。
它不像 AJAX 请求那样会受到同源策略的限制,而是利用 script 标签没有跨域限制的漏洞。
因为在 script 标签内可以加载其他域名下的 JavaScript 资源。服务端返回一段函数调用代码并把需要传递的 JSON 数据作为参数传入该函数中,然后客户端使用 <script>
标签来执行该代码。
3.4 WebSocket WebSocket
允许浏览器和服务器间进行实时双向通信。客户端发起建立 WebSocket 连接请求,如果服务器支持 WebSocket 并允许该连接,那么就能够在客户端与服务器之间建立一个 WebSocket 通道,双方便可通过这个通道进行数据传输。
以上是常见的跨域解决方法,不同的场景有不同的解决方式选择。目前最流行和推荐的解决方法是使用 CORS,因为它比 JSONP 更加安全、灵活