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

news/2024/11/17 22:36:17/

一、为什么有跨域

跨域问题本质上是由于浏览器的同源策略(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 的连接不受同源策略的限制,因此可以用于实现跨域通信。

http://www.ppmy.cn/news/1547817.html

相关文章

地质旅游平台推动“旅游+地质”融合发展

2024年元旦假期,哈尔滨文旅市场持续火爆。据哈尔滨市文化广电和旅游局大数据测算,截至1月1日,哈尔滨市累计接待游客304.79万人次,实现旅游总收入59.14亿元,游客接待量与旅游总收入达到历史峰值。 夏有进“淄”赶烤&…

springboot003基于springboot的图书个性化推荐系统(源码+包运行+LW+技术指导)

项目描述 临近学期结束,还是毕业设计,你还在做java程序网络编程,期末作业,老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下,你想解决的问…

用PHP实现一个简单的http服务器

在 PHP 中&#xff0c;你可以使用 socket 函数编写一个简单的 HTTP 服务器。以下是一个示例代码&#xff0c;监听 9000 端口&#xff0c;当收到请求时返回 "Hello, World"&#xff1a; <?php // 设置监听端口 $host 127.0.0.1; $port 9000;// 创建一个 TCP 套…

planRAG运行记录

代码仓库:https://github.com/myeon9h/PlanRAGneo4j的连接 下载neo4j客户端 save之后即可成功连接 连接neo4j权限问题解决 问题1:如何找到 neo4j.conf 文件 解决1:可以通过设置环境变量 NEO4J_CONF 来指定 neo4j.conf 文件的位置,会返回一个路径 echo $NEO4J_CONF解决2:如…

若点集A=B则A必能恒等变换地变为B=A这一几何常识推翻直线(平面)公理

黄小宁 关键词&#xff1a;“更无理”复数 复平面z各点z的对应点z1的全体是z1面。z面平移变为z1面就使x轴⊂z面沿本身平移变为ux1轴。R可几何化为R轴&#xff0c;R轴可沿本身平移变为R′轴&#xff0c;R′轴可沿本身平移变为R″轴&#xff0c;...。直线公理和平面公理使几百年…

docker启动训练容器教程

docker启动训练容器 拉取容器镜像 配置代理在国内拉取镜像 容器启动 容器使用显卡 conda环境配置 1、拉取容器镜像 docker pull NAME[:TAG]NAME&#xff1a;镜像名称&#xff0c;如ubuntu,mysql等等TAG&#xff1a;镜像标签&#xff0c;通常表示不同版本号&#xff0c;如果…

护眼模式浓度调整到最低

护眼模式浓度调整到最低 diff --git a/alps-mp-t0/frameworks/base/core/res/res/values/config.xml b/alps-mp-t0/frameworks/base/core/res/res/values/config.xml index f6ee1a97592..45c83baac63 100755 --- a/alps-mp-t0/frameworks/base/core/res/res/values/config.xml…

Vue 3 中的 ref 完全指南

Vue 3 中的 ref 完全指南 Vue 3 引入了 Composition API&#xff0c;其中 ref 是关键的一部分。ref 可以让我们更方便地在组件中定义响应式数据&#xff0c;在模板中使用 <script setup> 语法糖时尤为简洁。本文将详细讲解 Vue 3 中 ref 的概念、用途及常见用法&#xf…