跨域问题总结
文章目录
- 概要
- web应用整体请求流程
- 技术名词解释
- 跨域问题产生的原理
- 解决方案
- 前端代码角度
- 前端服务器角度
- 后端代码角度
- 后端服务器角度
- 小结
概要
在不成熟的前后端开发过程中,经常遇到跨域问题;
在前后端分离的模式下的开发过程中,经常遇到跨域问题;
本文章针对跨域问题提供几个有效的解决方案;
web应用整体请求流程
前端给后端发ajax、aioxs,中间要经过web服务器转手,然后后端接收请求、处理、响应,
有些情况下,可能没有web服务器这一步,这是一个闭环;
技术名词解释
跨域(Cross-Origin)是指在Web开发中,当前前端页面所在的域(域名、协议、端口)与请求的目标资源的域不一致时,浏览器会阻止页面发起跨域请求。这是出于安全考虑,以防止恶意网站获取用户的敏感信息或进行其他安全攻击。
跨域问题主要涉及到浏览器的同源策略(Same-Origin Policy)。同源策略要求网页只能从同一域的源加载资源,不同源的资源请求将会受到限制。
具体而言,同源策略包括以下几个方面:
协议相同: 两个页面的协议必须相同,比如都是http或https。
域名相同: 两个页面的域名必须相同,包括主域名和子域名。
端口相同: 两个页面的端口号必须相同。
跨域问题产生的原理
就是因为浏览器的同源策略,导致前端通过浏览器发给后端的请求,被浏览器阻止了。
解决方案
前端代码角度
如果你的前端是框架开发的,前端代码里可以用代理的方式实现。比如:
server: {proxy: {'/common': {target: envs.VITE_API_BASE_URL,changeOrigin: true,secure: false,},'/iot': {target: envs.VITE_API_BASE_URL,changeOrigin: true,secure: false,},'/farm': {target: envs.VITE_API_BASE_URL,changeOrigin: true,secure: false,},'/admin': {target: envs.VITE_API_BASE_URL,changeOrigin: true,secure: false,}},},
前端服务器角度
可以在前端web服务器配置文件内写反代,原理就是前端请求当前域名/api,这样浏览器就不会报错,前端web服务器接收到api的请求时去转发请求到后端服务器,
server {listen 80;server_name your_domain.com; # 替换为你的域名location / {root /path/to/your/frontend/app; # 替换为你的前端应用的路径index index.html;try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://localhost:5000; # 替换为你的API服务器地址和端口proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;}# 可以添加其他配置,如SSL证书等,根据实际需求
}
后端代码角度
// 允许任何来源访问
header("Access-Control-Allow-Origin: *");// 允许的请求方法
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");// 允许的请求头字段
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");// 响应类型
header("Content-Type: application/json; charset=utf-8");// 如果是预检请求(OPTIONS),直接返回空响应体,结束执行
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {header("HTTP/1.1 200 OK");exit();
}
有些框架比如laravel,还支持中间价的优雅语法实现,和这个代码大同小异,可以自行百度
后端服务器角度
server {listen 80;server_name your_domain.com; # 替换为你的域名location / {# 允许任何来源访问add_header 'Access-Control-Allow-Origin' '*';# 允许的请求方法add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';# 允许的请求头字段add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';# 响应类型add_header 'Content-Type' 'application/json; charset=utf-8';# 可以添加其他配置,如代理到后端应用等,根据实际需求}# 可以添加其他配置,如SSL证书等,根据实际需求
}
小结
一个请求的发起到后端接收到后端响应,这是一个闭环的流程,在这个流程上的每一步都可以实现跨域问题的解决
相关文章:
跨域问题总结
文章目录 概要web应用整体请求流程技术名词解释跨域问题产生的原理解决方案前端代码角度前端服务器角度后端代码角度后端服务器角度 小结 概要 在不成熟的前后端开发过程中,经常遇到跨域问题; 在前后端分离的模式下的开发过程中,经常遇到跨域…...
K8s-MySQL主从集群
K8s-MySQL主从集群 引言 该案例代码均可从https://github.com/WeiXiao-Hyy/k8s_example 获取,欢迎Star! 需求 一个“主从复制”的MySQL集群有一个主节点Master有多个从节点Slave从节点需要能水平扩展所以写操作只能在主节点上执行读操作可以在所有节点…...
seo js转码工具
js转码工具作用 用于把js加密 如果不想让别人看到自己的js 代码就可以使用这个方法 js工具网址 https://tool.chinaz.com/js.aspx 效果...
【SQL】601. 体育馆的人流量(with as 临时表;id减去row_number()思路)
前述 知识点学习: with as 和临时表的使用12、关于临时表和with as子查询部分 题目描述 leetcode题目:601. 体育馆的人流量 思路 关键:如何确定id是连续的三行或更多行记录 方法一: 多次连表,筛选查询方法二&…...
java上传本地文件到服务器共享
在Windows系统中,将本地文件夹中的某个文件上传到另一台Windows服务器电脑上,前提:两台电脑网络互通,要接收文件的Windows服务器文件夹开启了共享,可以被本机用如下方式进行写入和读取: 如何配置服务器共享请自行百度查找。 所需要的maven依赖如下: <dependency>…...
Redis场景总结
使用场景 在大型的秒杀库存扣减,app首页流量高峰,很容易将传统的关系型数据库(mysql,oracle等)给压垮。 还有很多没必要持久化的数据,比如说短信验证码,点赞数等。 分布式锁。 分布式缓存(会话共享)。 …...
2024.3.11 C++作业
1、提示并输入一个字符串,统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数要求使用C风格字符串完成 #include <iostream>using namespace std;int main() {char str[20];cout << "please enter the str:";gets(str);in…...
【wps】wps与office办公函数储备使用(结合了使用案例 持续更新)
【wps】wps与office办公函数储备使用(结合了使用案例 持续更新) 1、TODAY函数 返回当前电脑系统显示的日期 TODAY函数:表示返回当前电脑系统显示的日期。 公式用法:TODAY() 2、NOW函数 返回当前电脑系统显示的日期和时间 NOW函数:表示返…...
初级爬虫实战——伯克利新闻
文章目录 发现宝藏一、 目标二、简单分析网页1. 寻找所有新闻2. 分析模块、版面和文章 三、爬取新闻1. 爬取模块2. 爬取版面3. 爬取文章 四、完整代码五、效果展示 发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不…...
WPF资源的继承
假设这里有一个全局的资源 <Style TargetType"TextBlock"><Setter Property"FontSize" Value"40"/> </Style> 这是时候有些控件可能需要一个样式在这个基础上加一点内容的 <Style x:Key"textBlockStyle" Targ…...
linux网络通信(TCP)
TCP通信 1.socket----->第一个socket 失败-1,错误码 参数类型很多,man查看 2.connect 由于s_addr需要一个32位的数,使用下面函数将点分十进制字符串ip地址以网络字节序转换成32字节数值 同理端口号也有一个转换函数 我们的端口号位两个字…...
Mybatis 多个简单类型参数传入sql语句
如果只有一个简单类型的参数传入sql语句,我们可以在在#{}中可以随意命名,都可以获取到数据。但通常与接口方法中的参数同名。 但是如果有多个简单类型参数,如果没有特殊处理,那么Mybatis无法根据参数名获取数据。 正确获取方式如…...
SpringCloud OpenFeign 服务接口调用
一、前言 接下来是开展一系列的 SpringCloud 的学习之旅,从传统的模块之间调用,一步步的升级为 SpringCloud 模块之间的调用,此篇文章为第四篇,即介绍 Feign 和 OpenFeign 服务接口调用。 二、概述 2.1 Feign 是什么 Feign 是一…...
WAP网站商业计划书(附下载)
这份文件“WAP网站商业计划书.zip”详细阐述了一个由富有创造力和远见的大学生团队构思的创业项目。这个计划旨在开发并运营一个专注于无线应用协议(WAP)技术的网站,以服务于移动设备用户群体,提供一个易于访问、功能丰富且用户体…...
【存储】ZYNQ+NVMe小型化全国产存储解决方案
文章目录 1、背景2、基础理论3、设计方案3.1、FPGA设计方案3.1.1、NVMe控制器实现3.1.2、NVMe控制器实现 3.2 驱动软件设计方案3.2.1 读写NVMe磁盘软件驱动3.2.2 NVMe磁盘驱动设计3.2.3 标准EXT4文件系统设计 3.3 上位机控制软件设计方案 4、测试结果4.1 硬件测试平台说明4.2 测…...
数据结构之栈详解(C语言手撕)
🎉个人名片: 🐼作者简介:一名乐于分享在学习道路上收获的大二在校生 🙈个人主页🎉:GOTXX 🐼个人WeChat:ILXOXVJE 🐼本文由GOTXX原创,首发CSDN&…...
Docker学习——Dock镜像
什么是Docker镜像 Docker 镜像类似于虚拟机镜像,可以将它理解为一个只读的模板。 一个镜像可以包含一个基本的操作系统环境,里面仅安装了 Apache 应用程序(或 用户需要的其他软件) 可以把它称为一个 Apache 镜像。镜像是创建 Do…...
CorelDRAW Graphics Suite2024专业图形设计软件Windows/Mac最新25.0.0.230版
CorelDRAW Graphics Suite 2024是一款专业的图形设计软件,它集成了CorelDRAW Standard 2024和其他高级图形处理工具,为用户提供了全面的图形设计和编辑解决方案。 该软件拥有强大的矢量编辑功能,用户可以轻松创建和编辑矢量图形,…...
el-form表单中,对非表单内字段增加校验的方法
1、问题说明: 在开发表单的时候,可能会遇到el-form-item中绑定的值不在表单绑定的数据对象中。 此时用prop绑定该字段名是无效的,需要单独对这个字段进行校验。 在el-form-item中有一个属性 error 。用于表单域验证错误信息,设…...
【VTKExamples::Points】第四期 ExtractEnclosedPoints
很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例ExtractEnclosedPoints,并解析接口vtkExtractEnclosedPoints,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
xmind转换为markdown
文章目录 解锁思维导图新姿势:将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件(ZIP处理)2.解析JSON数据结构3:递归转换树形结构4:Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...
Java数组Arrays操作全攻略
Arrays类的概述 Java中的Arrays类位于java.util包中,提供了一系列静态方法用于操作数组(如排序、搜索、填充、比较等)。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序(sort) 对数组进行升序…...
rm视觉学习1-自瞄部分
首先先感谢中南大学的开源,提供了很全面的思路,减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接:https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架: 代码框架结构:readme有…...
java+webstock
maven依赖 <dependency><groupId>org.java-websocket</groupId><artifactId>Java-WebSocket</artifactId><version>1.3.5</version></dependency><dependency><groupId>org.apache.tomcat.websocket</groupId&…...
Vue3学习(接口,泛型,自定义类型,v-for,props)
一,前言 继续学习 二,TS接口泛型自定义类型 1.接口 TypeScript 接口(Interface)是一种定义对象形状的强大工具,它可以描述对象必须包含的属性、方法和它们的类型。接口不会被编译成 JavaScript 代码,仅…...
