跨域解决方案详解

简介

在Web开发中，由于同源策略的限制，当一个请求的协议、域名或端口不同时，就会产生跨域问题。然而在实际开发中，跨域请求是不可避免的，因此需要采用合适的跨域解决方案。本文将介绍几种常见的跨域解决方案及其适用场景。

CORS（跨域资源共享）

• 基本原理
  • W3C标准，允许浏览器向跨源服务器发出XMLHttpRequest请求
  • 通过在HTTP响应头中添加特定字段来实现
  • 需要浏览器和服务器同时支持
• 响应头字段
  • Access-Control-Allow-Origin: 指定允许访问的源
  • Access-Control-Allow-Methods: 指定允许的HTTP方法
  • Access-Control-Allow-Headers: 指定允许的请求头
  • Access-Control-Allow-Credentials: 是否允许发送Cookie
  • Access-Control-Max-Age: 预检请求的有效期
• 请求类型
  • 简单请求: 满足特定条件的GET、POST请求
  • 预检请求: 复杂请求会先发送OPTIONS请求

JSONP（JSON with Padding）

• 基本原理
  • 利用script标签不受同源策略限制的特性
  • 通过动态创建script标签来实现跨域请求
  • 只支持GET请求
• 实现方式
  • 客户端定义回调函数
  • 服务端返回函数调用形式的数据
  • 浏览器执行返回的JavaScript代码
• 优缺点
  • 优点: 兼容性好，支持老式浏览器
  • 缺点: 只支持GET请求，存在安全风险

代理服务器

• 基本原理
  • 通过同源的服务器代理转发请求到目标服务器
  • 浏览器访问同源服务器，服务器再访问目标服务器
  • 对浏览器来说是同源请求
• 实现方式
  • Nginx反向代理
  • Node.js中间件代理
  • Webpack DevServer代理
• 适用场景
  • 开发环境解决跨域问题
  • 无法修改目标服务器配置时

其他解决方案

• postMessage
  • HTML5提供的跨文档通信API
  • 适用于iframe、window.open等场景
• WebSocket
  • 基于WebSocket协议的全双工通信
  • 不受同源策略限制
• document.domain
  • 适用于主域相同，子域不同的场景
  • 需要设置相同的document.domain