ASP.NET Core WebAPI_解决跨域问题(前端后端)

说明

我的前端框架为Vue3

前后端跨域选其一即可

前端跨域

在项目的根目录找到vite.config.js文件,添加代码:

  server: {proxy: {'/api': {target: 'https://localhost:xxxx',changeOrigin: true,secure: false},},}

axios代码片段:

const req = axios.create({baseURL: '/api'
})const login = async () => {const resp = await req.post('/login/verify', loginData.value)respData.value = resp.data.message
}

 此时,请求实际上被代理为https://localhost:xxxx/api/login/verify,不会触发跨域问题

后端跨域

在项目的根目录找到Program.cs文件,

在 var app = builder.Build() 之前添加代码(注意事项已写在注释中):

// 跨域注册(于var app = builder.Build()之前)
builder.Services.AddCors(options =>
{   // CorsPolicy为跨域策略名(可选参数)options.AddPolicy("CorsPolicy", builder =>{builder.WithOrigins("http://localhost:5173")   // AllowAnyOrigin允许任何来源的跨域请求(.WithOrigins(url) 仅允许指定来源的跨域请求)// 注意: URL末端切勿加上"/".AllowAnyMethod()   // 允许任何HTTP方法.AllowAnyHeader()   // 允许任何Header.AllowCredentials();// 允许凭据(授权/身份验证)// 1/2/3为默认选项 4需要人为开启// 设置项不允许均为AllowAnyxxx()});
});

在 app.UseHttpsRedirection() 之前添加代码:

app.UseCors("CorsPolicy");

需要注意的是,此时axios中的代码片段需要稍作修改:

// .net开启CORS时, 需要完整路径
const req = axios.create({baseURL: 'https://localhost:7043/api'
})const login = async () => {const resp = await req.post('/login/verify', loginData.value)respData.value = resp.data.message
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/662540.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言系列-联合

🌈个人主页: 会编程的果子君 ​💫个人格言:“成为自己未来的主人~” 目录 联合体 联合体类型的声明 联合体的特点 相同成员的结构体和联合体对比 联合体大小的计算 联合的一个练习 联合体 联合体类型的声明 像结构体一样,联合体也是由…

【Flink】FlinkSQL实现数据从MySQL到MySQL

简介 我们在实际开发过程中可以使用Flink实现数据从MySQL传输到MySQL具体操作,本例子Flink版本1.13.6,具体操作如下: 创建mysql测试表 下面语句创建了mysql原表和目标表,并插入一条语句到mysql原表中 CREATE TABLE `mysql_source` ( `id` int(11) unsigned NOT NULL A…

NLP深入学习(十二):支持向量机(SVM)

文章目录 0. 引言1. 什么是支持向量机2. 线性 SVM3. 非线性 SVM3.1 推导过程3.2 常用核函数 4. 参考 0. 引言 前情提要: 《NLP深入学习(一):jieba 工具包介绍》 《NLP深入学习(二):nltk 工具包…

C语言·贪吃蛇游戏(上)

1. 游戏任务 使用C语言在Windows环境的控制台中模拟实现小游戏贪吃蛇 游戏中要包含以下功能: 1. 贪吃蛇地图绘制 2. 贪吃蛇上下左右移动和吃食物 3. 蛇撞墙,或撞到自身死亡 4. 计算得分 5. 蛇身加速、减速 6. 暂停游戏 2. Win32 API 介绍 Windows是一种多…

云原生之可观测性-APM概念及选型

导读:为了让大家更好的 APM 系统的设计实现,我将在公众号编写《云原生之可观测性》系列文章,深入讲解 APM 系统的产品设计、架构设计和基础技术。APM是一个庞杂的技术体系,涉及到很多开源技术,欢迎大家留言讨论。 本文…

深入剖析Java中的反射,由浅入深,层层剥离!

写在开头 之前更新了不少Java的基础知识,比如Java的类、对象、基础类型、关键字、序列化、泛型、值传递等等,今天要上点深度了,来聊一聊Java中的 反射 ! 所谓反射,就是在运行时分析、检查和操作类、接口、方法、属性的行为&#x…

python中的异步实践与tornado应用

最近项目中由于在python3中使用tornado,之前也有用过,是在python2中,由于对于协程理解不是很透彻,只是套用官方文档中的写法,最近比较细致的看了下协程的用法,也将tornado在python3中异步的实践了一下。 异步基础 要…

[香橙派开发系列]使用蓝牙和手机进行信息的交换

文章目录 前言一、HC05蓝牙模块1.HC05概述2.HC05的连接图3.进入HC05的命令模式4.常用的AT指令4.1 检查AT是否上线4.2 重启模块4.3 获取软件版本号4.4 恢复默认状态4.5 获取蓝牙的名称4.6 设置蓝牙模块的波特率4.7 查询蓝牙的连接模式4.8 查询模块角色 5.连接电脑6.通过HC05发送…

2024美赛MCM Problem A: Resource Availability and Sex Ratios资源可用性和性别比例 完整代码以及思路分享

虽然一些动物物种存在于通常的雄性或雌性性别之外,但大多数物种实质上是雄性或雌性。虽然许多物种在出生时的性别比例为1:1,但其他物种的性别比例并不均匀。这被称为适应性性别比例的变化。例如,美洲短吻鳄孵化卵的巢穴的温度会影…

sql指南之null值用法

注明:参考文章: SQL避坑指南之NULL值知多少?_select null as-CSDN博客文章浏览阅读2.9k次,点赞7次,收藏21次。0 引言 SQL NULL(UNKNOW)是用来代表缺失值的术语,在表中的NULL值是显示…

Git解决分支合并冲突的问题:分支合并提交出现了不同分支同一个文件的修改的冲突解决

有些时候我们合并分支的时候,会出现冲突,原因就是我们修改了分支A 的第一行代码,我们还修改了主分支上面同一个文件中的第一行代码(分支A已经提交过一次),此时我们在次合并的时候就会出现冲突,需…

智慧养老成关键力量,全视通智慧机构养老解决方案来助力

近日,国新办举行国务院政策例行吹风会,国家发展改革委、工业和信息化部、民政部、商务部有关负责人介绍《关于发展银发经济增进老年人福祉的意见》有关情况并答记者问。 会上,民政部养老服务司负责人李永新透露,将发展智慧养老服务…

tidb节点重启后,服务无法重连

大家好,我是烤鸭: 前几天遇到tidb节点重启后服务无法重连,确切地说是两个服务,一个可以正常重连,一个不行。 问题复现 由于线上执行慢SQL,导致TiDB 单个节点宕机重启。 其中A服务的3个节点和B服务的1个节…

Sketch使用手册:从入门到精通的完整教程

Sketch软件是Mac平台上流行的矢量图形编辑软件,旨在帮助用户创建网站、移动应用、图标等各种设计原型。Sketch软件的设计风格简洁明了,界面操作简单易用,非常适合UI/UX设计师、平面设计师等数字创意人员。本文将根据如何使用Sketch&#xff0…

IEPE数据采集卡的作用说明

IEPE传感器是一种特殊的加速度传感器,其特点是自带电量放大器或电压放大器。这种传感器产生的电信号非常微弱,很容易受到噪声干扰,因此需要使用灵敏的电子器件进行放大和信号调理。为了实现更好的抗噪声性能和更方便的封装,IEPE传…

linux系统ansible工具剧本编写布置zabbix

zabbix剧本编写 布置zabbixzabbix.yamlagentservermysql 布置zabbix ansible-galaxy init agent ansible-galaxy init mysql ansible-galaxy init server touch zabbix.yamlzabbix.yaml --- - hosts: webremote_user: rootroles:- mysql - server - hosts: dbremote_user: ro…

xmind思维导图 for mac v24.01中文版

mac电脑上思维导图软件哪个好呢? xmind for mac一个功能强大、易于使用的思维导图软件,够帮助你更好地组织思维、管理信息、规划项目和解决问题,提高个人和团队的工作效率。 软件下载:xmind思维导图 for mac v24.01中文版 XMind f…

LED显示屏在XR虚拟拍摄中的应用及前景

LED显示屏在XR虚拟拍摄中的应用及前景 随着科技的不断发展,虚拟现实(VR)、增强现实(AR)和混合现实(MR)等技术逐渐融入我们的生活。在这些技术的推动下,XR虚拟拍摄应运而生&#xff0…

数据可视化工具选择指南:六款主流工具的综合评测

随着大数据时代的来临,数据可视化已成为各行业不可或缺的工具。本文将为您介绍市面上六款主流数据可视化工具,包括山海鲸可视化、Echarts、D3.js、Tableau、Power BI和Funnel.io,帮助您更好地了解并选择适合您的工具。 山海鲸可视化 山海鲸…

面试官:cookie,sessionStorage,localStorage的区别

面试官:cookie,sessionStorage,localStorage的区别 一、cookie二、sessionStorage三、localStorage 一、cookie let date new Date(); let time 3600*60*60*24;time date.getTime() time; date.setTime(time); //expires为设置过期时间 …