type
status
date
slug
summary
tags
category
icon
password
Property
Mar 31, 2025 03:42 AM
由于浏览器的同源策略(协议，域名，端口)，在不同源时会产生跨域问题，这时在 DOM 访问，读取 Cookie，AJAX 请求（核心 CORS 场景）等，会出现跨域的问题导致操作失败。
使用 CROS 解决 AJAX 跨域问题，主要是通过添加特定响应头来解决。请求分为简单请求和复杂请求。
简单请求 | 复杂请求 |
✅请求方法（method）为： GET、HEAD、POST | 1. 不是简单请求，就是复杂请求。
2. 复杂请求会自动发送预检请求。 |
✅请求头字段要符合《CORS 安全规范》
简记：只要不手动修改请求头，一般都能符合该规范。 | ㅤ |
✅请求头的 Content-Type的值只能是以下三种：
• text/plain
• multipart/form-data
• application/x-www-form-urlencoded | ㅤ |
对于简单请求，通过添加
Access-Control-Allow-Origin响应头，来明确表达允许某个源发起跨域请求，随后浏览器在校验时，直接通过。对于复杂请求，在预检请求中设置如下响应头。
响应头 | 含义 |
Access-Control-Allow-Origin | 允许的源 |
Access-Control-Allow-Methods | 允许的方法 |
Access-Control-Allow-Headers | 允许的自定义头 |
Access-Control-Max-Age | 预检请求的结果缓存时间（可选） |
在 express 中可以使用 cors 中间件来解决跨域。
- 简单配置cors
- 完整配置cors
在 go-chi 项目中使用
github.com/go-chi/cors 来解决跨域- 代码
在 springboot 项目中使用配置来解决跨域
- 代码
在 vite 项目中使用代理来解决跨域
- 代码
配置 nginx 反向代理解决跨域