理解跨域，解决跨域

跨域是指浏览器出于安全考虑，限制网页脚本通过AJAX等方式访问不同源（协议、域名、端口任一不同）的资源。

• 同源策略：浏览器要求脚本只能访问与当前页面同源的资源，这是由浏览器的同源策略造成的安全限制。
• 跨域示例：

  不同域名：

  http://www.123.com
  与
  http://www.456.com

  不同子域名：

  http://abc.123.com
  与
  http://def.123.com

  不同端口：

  http://www.123.com:8080
  与
  http://www.123.com:8081

  不同协议：

  http://www.123.com
  与
  https://www.123.com

  特殊情况：localhost 与 127.0.0.1 也属于跨域。

解决跨域的方法主要有以下几种：

• JSONP：

  利用 <script> 标签没有跨域限制的特性，通过动态创建 <script> 标签并指定其 src 为目标API地址来实现跨域请求。

  适用于GET请求，兼容性好，但存在安全风险（如XSS攻击），且不支持POST等其他HTTP方法。

• CORS（跨域资源共享）：

  是一种W3C标准，允许浏览器向跨源服务器发送XMLHttpRequest请求。

  需要浏览器和服务器同时支持，现代浏览器均已支持，IE10以下版本不支持。

  实现方式：

  简单请求：浏览器自动在请求头中添加 Origin 字段，服务器通过设置 Access-Control-Allow-Origin 等响应头来允许跨域请求。

  非简单请求：如POST请求，浏览器会先发送一个OPTIONS预检请求，询问服务器是否允许该请求，服务器确认后才会发送实际请求。

  Spring MVC实现：在控制器方法上添加 @CrossOrigin 注解即可实现跨域支持。

• 其他方法：

  代理服务器：通过同源服务器作为代理转发请求，避免直接跨域。

  WebSocket：WebSocket协议不受同源策略限制，可用于跨域通信。

  postMessage：HTML5提供的API，允许不同源的窗口或iframe之间进行通信。

CORS的具体实现流程：

1. 简单请求：

   浏览器自动在请求头中添加 Origin 字段，表明请求来源。

   服务器检查 Origin，若允许则返回响应头 Access-Control-Allow-Origin，其值可以是具体域名或 *（表示允许所有域名）。

   若服务器不允许该来源，则不会返回 Access-Control-Allow-Origin 头，浏览器会抛出错误。

2. 非简单请求：

   浏览器先发送OPTIONS预检请求，询问服务器是否允许该请求方法及头信息。

   服务器响应中需包含 Access-Control-Allow-Methods（允许的HTTP方法）、Access-Control-Allow-Headers（允许的头信息）等字段。

   预检通过后，浏览器才会发送实际请求。

CORS响应头说明：

• Access-Control-Allow-Origin：指定允许访问该资源的外域URI。
• Access-Control-Allow-Methods：指定允许的HTTP方法（如GET、POST等）。
• Access-Control-Allow-Headers：指定允许的请求头信息。
• Access-Control-Allow-Credentials：是否允许发送Cookie。
• Access-Control-Max-Age：预检请求的有效期（秒）。

总结：

跨域是前端开发中常见的问题，主要由于浏览器的同源策略导致。解决跨域的方法有多种，其中JSONP和CORS是最常用的两种。JSONP适用于简单的GET请求，而CORS则提供了更全面的跨域解决方案，支持多种HTTP方法和头信息。在实际开发中，应根据项目需求和浏览器支持情况选择合适的跨域解决方案。