跨域原理解析以及解决方案

前言：跨域原理解析以及解决方案
个人博客 已更新该文章— 跨域原理解析以及解决方案

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 更加安全、灵活