ASP.NET WebApi+Vue前后端分离之允许启用跨域请求
2023-02-18 16:31:48 时间
前言:
这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目。前端使用Vue,后端则是使用ASP.NET WebApi。在搭建完成前后端框架后,进行接口测试时发现了一个前后端分离普遍存在的问题跨域(CORS)请求问题。因此就有了这篇文章如何启用ASP.NET WebApi 中的 CORS 支持。
一、解决Vue报错:OPTIONS 405 Method Not Allowed问题:
错误重现:
index.umd.min.js:1 OPTIONS http://localhost:1204/api/Login/ShopKeeperLogin 405 (Method Not Allowed)
解决方法:
在项目Global.asax中添加对OPTIONS方法的处理:
/// <summary> /// 跨域设置(预请求响应问题) /// </summary> protected void Application_BeginRequest() { //OPTIONS请求方法的主要作用(预请求,判断是否能够请求成功): //用来检查服务器的性能。如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,用以判断实际发送的请求是否安全。 if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS") { //表示对输出的内容进行缓冲,执行page.Response.Flush()时,会等所有内容缓冲完毕,将内容发送到客户端。 //这样就不会出错,造成页面卡死状态,让用户无限制的等下去 Response.Flush(); } }
二、解决ASP.NET WebApi 跨域资源共享-Cross Origin Resource Sharing(CORS)问题:
错误重现:
Access to XMLHttpRequest at 'http://localhost:1204/api/Login/ShopKeeperLogin' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
允许所有来源,HTTP方法,请求标头跨域:
在Web.config中找到system.webServer标签里面添加如下配置:
<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="*" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" /> </customHeaders> </httpProtocol>
指定对应来源,HTTP方法和请求标头跨域:
相关文章
- 使用Commons Logging
- 记一次 .NET 某自动化采集软件 崩溃分析
- [C# 中的序列化与反序列化](.NET 源码学习)
- .NET 向量类型的运算结果范例——用于学习Vector类所提供百多个向量方法
- 树莓派(香橙派)通过.NET IoT 操作SPI编写屏幕驱动 顺手做个四足机器人(一)
- WPF自定义控件之消息提示
- .NET跨平台框架选择之一 - Avalonia UI
- 篇(16)-Asp.Net Core入门实战-权限管理之用户创建与关联角色(ViewModel再用与模型验证二)
- 学习ASP.NET Core Blazor编程系列十——路由(下)
- 代码生成器(CodeBuilder) 2.9.4 稳定版
- 篇(15)-入门实战-权限管理之用户创建与关联角色(ViewModel再用与模型验证一)
- 篇(14)-Asp.Net Core入门实战-权限管理之角色编辑和赋权(ViewModel-DTO初探)
- 算法-2 选择排序、冒泡排序、插入排序
- 篇(13)-Asp.Net Core入门实战-将功能代码增加异步功能Async和配置简单防范CSRF攻击
- NET 6 实现滑动验证码(一)、创建工程
- 算法-1 算法复杂度
- 在WPF中使用Prism弹出自定义窗体样式的对话框
- 使用Fody时,CS-SCRIPT动态代码无法找到程序集
- C# 使用SIMD向量类型加速浮点数组求和运算(3):循环展开
- aspnetcore两种上传图片(文件)的方式