跨域

我们在开发前后端分离的项目经常会遇到一个问题，就是跨域。

1 什么是跨域

跨域（Cross-Origin）是指浏览器的同源策略（Same-Origin Policy），同源策略是浏览器的一种安全策略，浏览器会限制了从一个域（域名、协议和端口相同）加载的文档或脚本去访问另一个不同域的资源。这种限制是为了防止一个网站恶意读取另一个网站的敏感信息。

以下 URL 都被认为是不同的源：

• http://foooor.com 与 http://www.foooor.com（子域名不同）
• http://www.foooor.com:80 与 http://www.foooor.com:8080（端口不同）
• http://www.foooor.com 与 https://www.foooor.com（协议不同，http和https）

在前后端分离的项目中，前端和后台服务不是在同一个项目中，这会导致前后端的IP地址、端口或域名不一致，从而产生跨域问题。

具体来说，当前端页面尝试通过 Ajax 等技术向后端接口请求数据时，这个请求的域名、端口、协议和访问前端页面的域名、端口、协议不同。

举个栗子：

# 访问前端页面的地址是:
http://www.foooor.com/index.html

# 在页面上会发起请求，从服务器获取数据，例如地址是:
https://www.foooor.com:8080/get-user-info

• 上面前后端的 URL 是不同的源，不满足同源策略的要求，浏览器就会阻止这次请求，从而引发跨域问题。

2 跨域问题的解决方法

1 JSONP

JSONP（JSON with Padding）是一种通过 <script> 标签加载 JSON 数据的方式，但它只支持 GET 请求。JavaScript跨域请求数据是不可以的，但是使用 <script> 标签跨域请求其他站点的JavaScript脚本是可以的。可以把数据封装到JavaScript脚本中，作为脚本中函数的参数，然后将脚本返回给客户端，客户端获取脚本后，立即执行脚本，就可以获取到函数的参数，也就是服务器传递的数据了，从而解决了跨域问题。

JSONP是一种比较老的方式，目前已经被 CORS 大部分取代。

2 CORS

这是一种在服务器端通过设置适当的 CORS 头来允许跨域请求。也就是服务器告诉浏览器，我允许被跨域来访问，不要拦截了。

例如可以通过在Spring Boot项目中添加CORS配置类来实现，允许前端页面的域名访问后端接口。

3 使用反向代理

通过配置反向代理，前端所有的请求都会发送到同一个域名，也就是 Nginx 接收所有的请求，包括前端静态页面和后端动态数据接口的请求，然后 Nginx 反向代理服务器再根据请求路径，将后端请求转发到对应的后端服务器，这就避免了浏览器的跨域限制。