什么是跨域访问问题,如何解决?

跨域访问问题(Cross-Origin Resource Sharing, CORS)是由浏览器的同源策略(Same-Origin Policy)引发的一种安全限制。当网页尝试从一个与自身"源"(协议、域名、端口号)不同的地址请求资源(如API数据、图片、脚本等)时,浏览器会阻止该请求,除非目标服务器明确允许这种跨域访问。


核心概念解析

  1. 同源策略(Same-Origin Policy)

    • 定义:浏览器要求网页只能访问与自身"源"相同的资源。
    • 同源判定 :协议(http/https)、域名(example.com)、端口(:80)三者完全一致。
      例如:
      https://a.com/index.htmlhttps://a.com/api同源
      https://a.com/index.htmlhttp://a.com/api ❌ 协议不同(HTTPS vs HTTP)
      https://a.com/index.htmlhttps://b.com/api ❌ 域名不同
      https://a.com:80/index.htmlhttps://a.com:8080/api ❌ 端口不同
  2. 跨域场景举例

    • 前端部署在 https://web.com,调用API https://api.com/data
    • 本地开发时 http://localhost:3000 访问本地API http://localhost:8000(端口不同)。
    • 子域名不同:https://shop.example.com 访问 https://api.example.com

为什么需要跨域限制?

  1. 安全防护
    防止恶意网站通过脚本窃取用户敏感数据(如Cookie、私有数据)。例如:
    • 用户登录了 bank.com,若恶意网站 evil.com 能随意读取 bank.com 的数据,将导致账户被盗。
  2. 隔离攻击面
    限制CSRF(跨站请求伪造)、XSS(跨站脚本攻击)等漏洞的影响范围。

如何解决跨域问题?

方案1:服务端配置CORS(主流方案)

服务端在响应头中添加允许跨域的声明:

http 复制代码
Access-Control-Allow-Origin: https://web.com   // 允许特定域名
Access-Control-Allow-Origin: *                 // 允许所有域名(慎用)
Access-Control-Allow-Methods: GET, POST, PUT   // 允许的请求方法
Access-Control-Allow-Headers: Content-Type     // 允许的请求头

流程

  1. 浏览器发送预检请求(OPTIONS)询问服务器是否允许跨域。
  2. 服务器响应允许的规则。
  3. 浏览器确认后发送真实请求。
方案2:代理服务器(Proxy)

前端通过同源代理中转请求:

复制代码
浏览器 → https://web.com/proxy?target_api=xxx → 代理请求 → https://api.com/data

常用于开发环境(如Webpack DevServer代理)或后端服务中转。

方案3:JSONP(过时方案,仅限GET请求)

利用 <script> 标签不受同源策略限制的特性:

html 复制代码
<script src="https://api.com/data?callback=handleData"></script>

服务端返回:handleData({...}),前端需提前定义 handleData 函数。


常见误区

  • "Postman能请求成功,但浏览器报CORS错误"
    → 因为Postman不受同源策略限制,浏览器才会拦截。
  • "前端代码修改请求头可以绕过CORS"
    → 浏览器会阻止前端修改敏感请求头(如Origin),必须服务端授权。

总结

关键点 说明
触发原因 浏览器同源策略的安全限制
本质 浏览器与服务端的协作机制(通过HTTP头协商)
解决方案 服务端配置CORS、代理服务器、JSONP(历史方案)
核心目标 在安全前提下实现合法跨域通信

⚠️ 注意:CORS是浏览器行为,服务端即使未配置CORS,接口本身仍可被非浏览器工具(如curl、Postman)正常调用。

相关推荐
摆烂且佛系2 分钟前
CSS元素的总宽度计算规则
前端·css
对岸住着星星6 分钟前
vue3+ts实现拖拽缩放,全屏
前端·javascript
菜鸟小九13 分钟前
SSM(MybatisPlus)
java·开发语言·spring boot·后端
不爱编程的小九九15 分钟前
小九源码-springboot051-智能推荐旅游平台
java·spring boot·后端
aesthetician16 分钟前
@tanstack/react-query:React 服务器状态管理与数据同步解决方案
服务器·前端·react.js
数据知道16 分钟前
Go基础:常用数学函数处理(主要是math包rand包的处理)
开发语言·后端·golang·go语言
期待のcode28 分钟前
MyBatis框架—延迟加载与多级缓存
java·数据库·后端·缓存·mybatis
老华带你飞34 分钟前
小区服务|基于Java+vue的小区服务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·小区服务管理系统
数据知道34 分钟前
Go基础:文件与文件夹操作详解
开发语言·后端·golang·go语言
华仔啊41 分钟前
Spring 配置混乱?搞懂这两个核心组件,问题真能少一半
java·后端·spring