ASP.NET WebApi+Vue前后端分离之允许启用跨域请求

简介: ASP.NET WebApi+Vue前后端分离之允许启用跨域请求

前言:

  这段时间接手了一个新需求,将一个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方法和请求标头跨域:

详情参考微软官方文档:https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api#set-the-allowed-origins

相关文章
|
1月前
|
人工智能 JavaScript 前端开发
毕业设计|基于Spring Boot和Vue.js的前后端分离商城系统(二)
毕业设计|基于Spring Boot和Vue.js的前后端分离商城系统
|
13天前
|
前端开发 开发者
基于.net8 和 Vue3 的前后端分离管理系统搭建
一款名为PurestAdmin的前后端分离系统,基于.net8和Vue3,实现了真正意义上的分离,服务端仅关注功能接口,客户端通过功能编码控制路由。选用Vue3提升交互体验,利用ABP框架保证后端性能。项目特点是无业务功能、单Token刷新、接口权限验证和在线用户管理。源码可在Gitee、GitHub找到,提供在线预览和文档支持。历经多次重构,旨在促进快速开发,降低框架搭建难度。
|
24天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
25 1
|
1月前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
34 4
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
|
1月前
|
JavaScript 安全 Java
Spring Boot 和 Vue.js 实现的前后端分离的用户权限管理系统
Spring Boot 和 Vue.js 实现的前后端分离的用户权限管理系统
86 0
|
1月前
|
人工智能 前端开发 JavaScript
毕业设计|基于SpringBoot+Vue的前后端分离的电影购票系统(二)
毕业设计|基于SpringBoot+Vue的前后端分离的电影购票系统
|
1月前
|
前端开发 Java 关系型数据库
毕业设计|基于SpringBoot+Vue的前后端分离的电影购票系统(一)
毕业设计|基于SpringBoot+Vue的前后端分离的电影购票系统
|
1月前
|
监控 JavaScript Java
毕业设计|基于Spring Boot和Vue.js的前后端分离商城系统(一)
毕业设计|基于Spring Boot和Vue.js的前后端分离商城系统
|
1月前
|
存储 缓存 前端开发
毕业设计|SpringBoot+Vue的前后端分离个人博客系统
毕业设计|SpringBoot+Vue的前后端分离个人博客系统
|
1月前
|
存储 前端开发 Java
相册管理系统|基于Springboot+Vue实现前后端分离的相册管理系统
相册管理系统|基于Springboot+Vue实现前后端分离的相册管理系统
317 1