记录一下跨域的问题,讲讲跨域

一、为什么有跨域

跨域问题本质上是由于浏览器的同源策略(Same Origin Policy)引起的。这个策略是为了增强网页的安全性,防止恶意网站获取用户的敏感信息。也就是说经过浏览器的才有跨域,在前端代码中进行数据请求的时候往往都要注意跨域的问题,而这个问题在后端是不存在,后端可以调用另外一个后端的接口。

二、怎么样算跨域

浏览器的同源策略指出URL 中的协议、域名和端口号必须完全相同

也就是http跟https,哪怕域名端口号相同都是不同的。

举例:

http://127.0.0.1:8080

https://127.0.0.1:8080

http://127.0.0.1:8081

http://127.0.0.1:8082

都属于跨域。

三、前端跨域的作用

前端(浏览器端)请求跨域限制的原因主要是为了保护用户的安全。 当您在浏览器中访问一个网站(例如 https://example.com)时,该网站的 JavaScript 代码可以尝试访问其他源(例如 https://anotherdomain.com)的资源。如果没有限制,一个恶意网站可能会通过 JavaScript 获取另一网站用户的敏感数据,比如 cookies、账户信息等。

四、为什么后端请求没有跨域

1.环境不同:后端应用服务器(例如 Node.js、Java EE、Django 等)并不受同源策略的限制。后端服务可以自由地向其他域发起 HTTP 请求,而不会受到浏览器的安全机制阻止。

2.信任模型:后端代码通常运行在可信的环境中,不会直接暴露给用户,因此可以更自由地访问外部 API。

3.业务逻辑设计:后端通常需要与多个服务通信(例如数据库、第三方 API 服务等),这方面的限制较少,因此允许跨域请求。

五、如何解决前端跨域问题

1.CORS(跨源资源共享):后端服务器可以通过设置 CORS 头部来允许特定来源的请求。例如,后端可以在响应头中包含:

Access-Control-Allow-Origin: *

这是很常见的做法,让前端无需再代理直接访问后端

2.JSONP:该方法已经不推荐使用,通过动态添加

3.代理服务器:在开发环境中,可以配置代理,将前端请求的路径代理到后端服务器,从而避免跨域问题。

也是一种常见的做法,通过代理,规避这个问题,如在react中可以使用http-proxy-middleware

  • WebSocket:WebSocket 的连接不受同源策略的限制,因此可以用于实现跨域通信。
相关推荐
SuperEugene1 分钟前
Axios 统一封装实战:拦截器配置 + baseURL 优化 + 接口规范,避坑重复代码|API 与异步请求规范篇
前端·javascript·vue.js·前端框架·axios
Alan Lu Pop2 分钟前
Figma 配置
前端·ai编程·cursor
Moment3 分钟前
手把手搭一套前端监控采集 SDK
前端·javascript·面试
华洛4 分钟前
实战指南:企业如何选择AI需求的落地技术方案
前端·产品经理·产品
莫爷5 分钟前
JSON vs XML vs YAML 深度对比:如何选择合适的数据格式?
xml·前端·json
We་ct11 分钟前
LeetCode 33. 搜索旋转排序数组:O(log n)二分查找
前端·算法·leetcode·typescript·个人开发·二分·数组
华仔啊17 分钟前
前端不懂 Java?后端怕 CSS?这套AI全栈方案专治各种偏科
java·前端·后端
木斯佳19 分钟前
前端八股文面经大全:得物AI应用开发一面(2026-03-23)·面经深度解析【加精】
前端·人工智能·ai·markdown·chat·rag
无巧不成书02182 小时前
Windows PowerShell执行策略详解:从npm报错到完美解决
前端·windows·npm·powershell执行策略·执行策略·npm.ps1·脚本报错
Z兽兽9 小时前
React@18+Vite项目配置env文件
前端·react.js·前端框架