【C#】使用vue3的axios发起get和post请求.net framework部署的API显示跨域

news2024/10/21 17:05:02

欢迎来到《小5讲堂》
这是《C#》系列文章,每篇文章将以博主理解的角度展开讲解。
温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!

在这里插入图片描述

目录

  • 前言
  • 跨域提示
  • 解决方案
  • 现状
  • 跨域疑问
  • 跨域概念
  • 相关文章

前言

最近在对接.net framework 4.6.1部署的api接口,由于太久没有用这个框架了,
很多小细节都忘得差不多了,刚好趁这次遇到的问题进行简单记录下。
现在开发模式基本都是前后端分离,虽然C#和Java本身也有自己的前端页面,
但是目前出来的vue框架,极大帮助了在前端开发的效率和性能,拥抱变化吧!

跨域提示

因为vue运行起来的本地地址和端口都是独立的,所以和后端API接口的地址端口肯定是不一样。
所以就会出现下面跨域提示,也很明确提示Access=Control-Allow-Origin。
在这里插入图片描述
下面表示并没有运行表头authorization字段值的请求。
在这里插入图片描述

解决方案

在web.config文件增加下面代码即可,如果还有出现跨域,那么再具体查看错误提示,一般都是Headers表头设置多一点。

<system.webServer>
    <!-- ... 其他配置 ... -->
    <httpProtocol>
      <customHeaders>
        <!-- 允许跨域资源共享(CORS) -->
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type,Authorization" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
    <!-- ... 其他配置 ... -->
  </system.webServer>

现状

前后端分离开发,一般会分为前端开发和后端开发,这就意味着需要前后端开发人员进行一定接口对接沟通,
这个时候出现最多的问题就是跨域问题,特别是本地调试,必然会出现不同访问地址和域名,互扯和纷争就开始了。
比如:我明明已经设置了跨域,别人可以,为什么你的不可以。
如何破局呢?不妨从下面这几个方面思考。

  • 前端
    1)前端解决跨域一般是通过设置本地代理。

  • 后端
    1)postman和APP都可以访问成功
    2)浏览器发起请求显示跨域
    3)确认是http还是https发起的请求
    备注:通过postman和APP发起的访问,属于工具请求,没有资源的相互方法,源头发起就是api接口本身。
    通过浏览器发起的请求属于源头属于浏览器本身运行地址,所以出现跨域。

在这里插入图片描述

跨域疑问

APP发起的请求和浏览器发起的请求一样吗,APP不会出现跨域,浏览器请求提示跨域,这是为什么呢?

跨域问题主要是由于浏览器的同源策略造成的。
同源策略是浏览器的一种安全机制,它要求域名、协议和端口三者完全相同,否则就会阻止跨域请求‌。
由于APP和小程序不属于浏览器环境,因此不受同源策略的限制,也就不会出现跨域问题‌。

在浏览器中,跨域问题主要体现在AJAX请求上。
当浏览器发起一个不同源的AJAX请求时,由于同源策略的限制,会阻止这些请求的成功执行,从而提示跨域错误‌。
然而,在APP和小程序中,由于不存在同源策略,所以不会出现跨域问题‌在这里插入图片描述

跨域概念

跨域通常指的是在编程和网络安全中,不同源(域名、协议或端口)之间的交互。

在Web开发中,跨域请求指的是浏览器在一个域中发送的请求,试图访问另一个域中的资源。
为了安全考虑,现代浏览器实施了同源策略(Same-Origin Policy),限制了一个来源的文档或脚本如何与另一个来源的资源进行交互。

这意味着在大多数情况下,如果你尝试通过AJAX、Fetch API或其他方式从一个域向另一个域发送请求,浏览器会阻止这种“跨域”请求。
然而,在实际应用中,跨域交互是必需的,例如,当你需要从不同的域加载数据或资源时。

为了解决这个问题,有几种常见的跨域解决方案:

1.JSONP(JSON with Padding):
一种利用

2.CORS(Cross-Origin Resource Sharing):
一种更为现代和灵活的跨域解决方案。通过服务器设置特定的HTTP头,允许浏览器跨域请求资源。CORS支持所有类型的HTTP请求。

3.代理服务器:
通过设置一个代理服务器,将客户端的请求转发到目标服务器,再将目标服务器的响应返回给客户端。这样,客户端和目标服务器之间的交互就通过代理服务器进行,从而避免了跨域问题。

跨域是Web开发中经常遇到的问题,了解并掌握跨域解决方案对于开发人员来说是非常重要的。

相关文章

【C#】使用vue3的axios发起get和post请求.net framework部署的API显示跨域

【C#】.net core 6.0 webapi 使用core版本的NPOI的Excel读取数据以及保存数据

【C#】pdf按页分割文件,以及分页合并,效果还不错,你值得拥有

【C#】未能加载文件或程序集“CefSharp.Core.Runtime.dll”或它的某一个依赖项。找不到指定的模块。

【C#】.net core 6.0 在program时间格式统一json格式化,并列举program默认写法和简化写法

【C#】.net core 6.0 ApiController,API控制器方法,API接口以实体类作为接收参数应该注意的点

【C#】 SortedDictionary,查找字典中是否存在给定的关键字

【C#】.net core 6.0 MVC返回JsonResult显示API接口返回值不可被JSON反序列化

【C#】.net core 6.0 使用第三方日志插件Log4net,配置文件详细说明

【C#】使用代码实现龙年春晚扑克牌魔术(守岁共此时),代码实现篇

【C#】使用代码实现龙年春晚扑克牌魔术(守岁共此时),流程描述篇

【C#】约瑟夫原理举例2个代码实现

【C#】List泛型数据集如何循环移动,最后一位移动到第一位,以此类推

【C#】获取文本中的链接,通过正则表达式的方法获取以及优化兼容多种格式

温故而知新,不同阶段重温知识点,会有不一样的认识和理解,博主将巩固一遍知识点,并以实践方式和大家分享,若能有所帮助和收获,这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。

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

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

相关文章

Electron入门笔记

Electron入门笔记 ElectronElectron 是什么Electron流程模型创建第一个Electron项目配置自动重启主进程和渲染进程通信打包应用 Electron Electron 是什么 跨平台的桌面应用开发框架使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium和 Node.js Electro…

【Python网络编程】学习Socket编程,打造网络应用!

【Python网络编程】学习Socket编程&#xff0c;打造网络应用&#xff01; 网络编程是现代计算机科学中的重要一环&#xff0c;几乎所有的应用都依赖网络传输数据。无论是创建简单的客户端-服务器模型&#xff0c;还是构建复杂的网络应用&#xff0c;Socket 编程都是关键的技术…

【远程监控新体验】OpenObserve结合内网穿透无公网IP远程访问全攻略

文章目录 前言1. 安装Docker2. Docker镜像源添加方法3. 创建并启动OpenObserve容器4. 本地访问测试5. 公网访问本地部署的OpenObserve5.1 内网穿透工具安装5.2 创建公网地址6. 配置固定公网地址前言 本文主要介绍如何在Linux系统使用Docker快速本地化部署OpenObserve云原生可观…

java导出带图形的word

先看效果图&#xff1a;方法都是一样的&#xff0c;所以数据只做了前两组 第一步需要准备模版&#xff1a; 新建一个word插入图表&#xff0c;选择想要的图表。 编辑图表&#xff1a;营业额表示数字&#xff0c;季度表示文字。其他的样式编辑可根据自己的需求更改&#xff0c;…

怎么给word文字注音?准确率高达80%,操作简单

怎么给word文字注音&#xff1f;在数字化办公日益普及的今天&#xff0c;Microsoft Word作为最常用的文字处理软件之一&#xff0c;承载着无数人的文档编辑需求。然而&#xff0c;在这个看似功能强大的工具中&#xff0c;有一个实用却常被忽视的功能——为文字注音。这对于教育…

电感的学习

电感是表示电路中电流变化对电压影响的物理量&#xff0c;常用符号 LLL 表示。电感的基本公式可以从其定义和基本特性中得出&#xff0c;主要包括以下几个方面&#xff1a; 1. 电感的定义 2. 电感能量存储 3. 自感与互感 自感&#xff1a;电感器自身的电感&#xff0c;表示电…

2024 OSCAR|《开源体系建设路径模式洞察与建议》即将发布

近年来&#xff0c;开源体系建设受到高度重视&#xff0c;国家软件发展战略和“十四五”规划纲要均对开源作出重要部署&#xff0c;为我国开源体系建设和发展指明了方向。9月25日&#xff0c;工业和信息化部党组书记、部长金壮指出要加强开源体系建设&#xff0c;助推产业高质量…

03 springboot-国际化

Spring Boot 提供了很好的国际化支持&#xff0c;可以轻松地实现中英文国际化。 项目创建&#xff0c;及其springboot系列相关知识点详见&#xff1a;springboot系列 springboot系列&#xff0c;最近持续更新中&#xff0c;如需要请关注 如果你觉得我分享的内容或者我的努力对…

构建高效房屋租赁平台:SpringBoot应用案例

第1章 绪论 1.1 课题背景 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。所以各行业&#xff0c;尤其是规模较大的企业和学校等…

爱维艾夫净利润下滑权益回报率骤降,退款数量增加市占率仅1%

《港湾商业观察》施子夫 9月13日&#xff0c;爱维艾夫医院管理集团有限公司&#xff08;以下简称&#xff0c;爱维艾夫&#xff09;第二次递表港交所&#xff0c;保荐机构为中信证券。 爱维艾夫的第一次递表发生在2023年12月&#xff0c;后因递表资料失效而告终。一年不到的时…

基于SSM机场网上订票系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;机票信息管理&#xff0c;订单信息管理&#xff0c;机场广告管理&#xff0c;系统管理 前台账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;机票信息&#xf…

餐饮行业有什么好的供应链管理系统

在餐饮企业的供应链管理中&#xff0c;合适的供应链管理系统是至关重要的&#xff0c;它能够帮助企业提高食材采购效率、降低成本、确保食材供应的及时性和质量。然而&#xff0c;许多餐饮企业在供应链管理系统方面存在诸多问题&#xff0c;常常会面临以下困境&#xff1a; ●…

【路径跟踪控制:Bang-Bang 控制与车辆运动学模型】

【路径跟踪控制&#xff1a;Bang-Bang 控制与车辆运动学模型】 1. 引言2. 环境准备3. 车辆运动学模型3.1 理论基础3.2 Python 实现车辆运动学模型建模 4. Bang-Bang 控制策略4.1 理论基础4.1.1 误差角度计算与转向角调整4.1.2 Bang-Bang控制实现 4.2 完整代码4.3 控制策略解释 …

springboot051医院管理系统(论文+源码)_kaic

医院管理系统 摘要 随着信息互联网信息的飞速发展&#xff0c;医院也在创建着属于自己的管理系统。本文介绍了医院管理系统的开发全过程。通过分析企业对于医院管理系统的需求&#xff0c;创建了一个计算机管理医院管理系统的方案。文章介绍了医院管理系统的系统分析部分&#…

万家数科:零售业务信息化融合的探索|OceanBase案例

本文作者&#xff1a;马琳&#xff0c;万家数科数据库专家。 万家数科商业数据有限公司&#xff0c;作为华润万家旗下的信息技术企业&#xff0c;专注于零售行业&#xff0c;在为华润万家提供服务的同时&#xff0c;也积极面向市场&#xff0c;为零售商及其生态系统提供全面的核…

基于DSP+ARM+FPGA的电能质量分析仪的软件设计

软件设计是电能质量设备的核心内容&#xff0c;上述章节详细介绍了电能质量参数的 算法&#xff0c;并且通过仿真实验进行了验证&#xff0c;本章将结合现代电能质量监测设备需求实 现算法在实际电网中应用。根据设计的电能质量分析仪的需求分析&#xff0c;进行总体的 软件…

【Android】Jetpack入门知识总结(LifeCycle,ViewModel,LiveData,DataBinding等)

文章目录 LifeCycle使用Lifecycle解耦页面与组件自定义控件实现LifecycleObserver接口注册生命周期监听器 使用LifecycleService解耦Service与组件使用ProcessLifecycleOwner监听应用程序生命周期 ViewModel用法在 Fragment 中使用 ViewModel LiveDataDataBinding导入依赖基本用…

Redis 性能优化选择:Pika 的配置与使用详解

引言 在我们日常开发中 redis是我们开发业务场景中不可缺少的部分。Redis 凭借其内存存储和快速响应的特点&#xff0c;广泛应用于缓存、消息队列等各种业务场景。然而&#xff0c;随着数据量的不断增长&#xff0c;单节点的 Redis 因为内存限制和并发能力的局限&#xff0c;逐…

FP7127:降压恒流LED芯片 支持双路调色调光 PWM调光

一、降压恒流LED芯片FP7127 FP7127 是平均电流模式控制的 LED 驱动 IC&#xff0c;具有稳定输出恒流的能力&#xff0c;优秀的负载调整率与高精度的电流控制。不用额外增加外部补偿元件&#xff0c;简化 PCB 板设计。输出的LED电流精度为 2%。 如果你想进行PWM数位调光&#…