首页
学习
活动
专区
圈层
工具
发布

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

在搭建完成前后端框架后,进行接口测试时发现了一个前后端分离普遍存在的问题跨域(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方法的处理: /// AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,用以判断实际发送的请求是否安全。.../docs.microsoft.com/zh-cn/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api#

3.2K20

同源策略与CORS

不同源下,浏览器不允许js操作Cookie、LocalStorage、DOM等数据或页面元素,也不允许发送ajax请求,同源下则不受影响。...下图是在Chrom控制台中发送ajax跨域请求的报错信息: [跨域ajax请求报错信息] 图片中黄色部分提示响应被阻止,说明在跨域的情况下,请求依然发送到了服务器且服务器返回了数据,只是被浏览器拦下了。...浏览器在发送复杂请求前会先发送Preflight request(预检请求),即发送OPTIONS请求。注意是浏览器发送的,用户无感。...浏览器根据返回信息判断后续请求是否符合服务器端跨域要求,不符合则抛出错误信息。通过预检请求后,则发送后续请求,此时和简单请求无差别。...一个问题 上周在ASP.NET Web API 2中使用CORS,报错:The 'Access-Control-Allow-Origin' header contains multiple values

1.3K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【ASP.NET Core 基础知识】--前端开发--使用ASP.NET Core和JavaScript进行通信

    当页面加载时,JavaScript代码会向后端发送一个GET请求,并将返回的数据显示在页面上。...AJAX的出现改变了Web开发的方式,使得网页变得更加动态、交互性更强,用户体验得到了极大的提升。 核心原理 传统的Web页面在与服务器交互时,通常是通过整个页面的刷新来实现。...当页面加载完成时,JavaScript代码将向/api/user发送一个GET请求,获取用户信息。成功获取到数据后,我们将用户信息显示在页面上的userInfo div中。...如果请求失败,则显示错误消息。 测试 现在,您可以运行ASP.NET Core应用程序,并访问包含AJAX请求的HTML页面。...4.2 在ASP.NET Core中创建和使用RESTful API 在ASP.NET Core中创建和使用RESTful API可以通过以下步骤完成: 创建ASP.NET Core Web API 项目

    1.6K00

    用ASP.NET Core 2.0 建立规范的 REST API -- GET 和 POST

    Core建立Richardson成熟度为2级的伪RESTful web API, 本文介绍的是GET和POST....状态码 状态码是非常重要的,因为只有状态码会告诉API的消费者: 请求是否如预期的成功,或者失败 如果出现了错误,谁该为这个错误负责 下面再列举一下web API会用到的状态码: 200级别,表示成功:...,表示API的消费者发送到服务器的请求是错误的 401 - Unauthorized,表示没有权限 403 - Forbidden,表示用户验证成功,但是该用户仍然无法访问该资源 404 - Not found...,表示请求的资源不存在 405 - Method not allowed,这就是当我们尝试发送请求给某个资源时,使用的HTTP方法却是不允许的,例如使用POST api/countries, 而该资源只实现了...错误;有时也用在尝试创建资源时该资源已存在的情况。

    1.9K10

    同源策略与CORS

    不同源下,浏览器不允许js操作Cookie、LocalStorage、DOM等数据或页面元素,也不允许发送ajax请求,同源下则不受影响。...下图是在Chrom控制台中发送ajax跨域请求的报错信息: ? 图片中黄色部分提示响应被阻止,说明在跨域的情况下,请求依然发送到了服务器且服务器返回了数据,只是被浏览器拦下了。...浏览器在发送复杂请求前会先发送Preflight request(预检请求),即发送OPTIONS请求。注意是浏览器发送的,用户无感。 ?...浏览器根据返回信息判断后续请求是否符合服务器端跨域要求,不符合则抛出错误信息。通过预检请求后,则发送后续请求,此时和简单请求无差别。...一个问题 上周在ASP.NET Web API 2中使用CORS,报错:The 'Access-Control-Allow-Origin' header contains multiple values

    86920

    ASP.NET-WebFoms常见前后端交互方式

    在 ASP.NET Web Forms 中,实现前后端交互是开发 Web 应用程序的重要部分。通过合适的数据传递方式,前端页面能够与后端进行有效的通信,并实现数据的传递、处理和展示。...本文介绍了ASP.NET Web Forms开发中常见的前后端交互方式,包括控件绑定、Ajax、WebService、自定义处理程序和Form提交等。...请求Ajax 技术允许在不刷新整个页面的情况下,异步地向服务器发送请求并接收响应。...在 ProcessRequest 方法中,我们从请求中获取了表单提交的用户名和密码数据,并进行相应的处理。然后,我们返回一个简单的成功消息给客户端。...三、常见前后端交互方式总结通过上述介绍,我们可以看到在 ASP.NET Web Forms 中实现前后端交互有多种方式。

    83121

    使用ASP.NET Core 3.x 构建 RESTful API - 3.3 状态码、错误故障、ProblemDetails

    4xx,客户端错误: 400 - Bad Request,表示API消费者发送到服务器的请求是有错误的; 401 - Unauthorized,表示没有提供授权信息或者提供的授权信息不正确...not allowed,当尝试发送请求到资源的时候,使用了不被支持的HTTP方法时,就会返回405状态码; 406 - Not acceptable,这表示API消费者请求的表述格式并不被Web...错误和故障 系统时不时的会出现一些问题,这些问题可以划分为两类:错误和故障。 错误 Errors 错误通常是由API的消费者引起的。...API消费者请求时传递的数据是不合理的,这时API就会正常的将其拒绝。例如,请求的凭证是不合理的,或者请求的参数不合理等等。 这些就是HTTP 4xx错误。...在 ASP.NET Core 2.2的时候,如果Controller使用了 [ApiController] 这个属性,那么 ProblemDetails 就是客户端错误码的标准响应。

    1.8K20

    jquery 操作ajax 相关方法

    发送给服务器的字符串后键值对     success() 当请求成功时回调的函数   用法:     $.post("test.php", { name: "John", time: "...IIS定义了许多不同的401错误,它们指明更为具体的错误原因。这些具体的错误代码在浏览器中显示,但不在IIS日志中显示: 401.1-登录失败。...5xx-服务器错误 服务器由于遇到错误而不能完成该请求。 500-内部服务器错误。 500.12-应用程序正忙于在Web服务器上重新启动。...500.13-Web服务器太忙。 500.15-不允许直接请求Global.asa。 500.16–UNC授权凭据不正确。这个错误代码为IIS6.0所专用。...这个错误代码为IIS6.0所专用。 500.100-内部ASP错误。 501-页眉值指定了未实现的配置。 502-Web服务器用作网关或代理服务器时收到了无效响应。

    3.8K100

    Ajax详解(拓展:利用Ajax实现用户名的校验)

    ", "application/x-www-form-urlencoded"); ajax.send("method=login&uid=10");` 使用ajax时遇到的http响应码信息 1**:请求收到...307——申明请求的资源临时性删除 400——错误请求,如语法错误 401——请求授权失败 402——保留有效ChargeTo头响应 403——请求不允许 404——没有发现文件、查询或URl 405—...—用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖,请求资源不可访问 407——类似401,用户必须首先在代理服务器上得到授权 408——客户端没有在用户指定的饿时间内完成请求...409——对当前资源状态,请求不能完成 410——服务器上不再有此资源且无进一步的参考地址 411——服务器拒绝用户定义的Content-Length属性请求 412——一个或多个请求头字段在当前请求中错误...}); //ajax请求方式 $.ajax({json格式参数}):参数说明参照api //例如 $.ajax({ type:"get", url:"data

    1.4K10

    :第十五章 - 传统开发模式下的 axios 使用入门

    这一章会涉及到简单的前后端的数据交互,作为一名 .NETer,本篇文章将采用 ASP.NET Core Web API 作为后端服务,你可以根据自己的喜好进行选择。...这里 data 属性显示的就是整个的用户数据集合,在实际使用中,你需要与 http 响应状态码进行结合,考虑如果后端出现错误如何使前端知晓,从而相对友好的通知用户。...与 get 请求相似,使用 axios 发起 post 请求也是在 then 回掉方法中获取接口返回值,在 catch 回掉方法中捕获错误信息。...请求一样,我们可以使用 $.ajax/$.post 方法去发起一个 get/post 请求,也可以在 $.ajax 方法中通过指定请求的 type 类型来确定我们是以 get 请求还是 post 请求的方式执行...例如,当调用接口不成功时,http 响应状态码为 400,同时返回错误信息,我们完全可以在拦截器中进行判断,当所有的接口响应状态码为 400 时,弹出后端返回的错误信息。

    1.6K30

    HTTP错误代码大全

    HTTP 错误 405 405 不允许此方法 对于请求所标识的资源,不允许使用请求行中所指定的方法。请确保为所请求的资源设置了正确的 MIME 类型。...HTTP 错误 412 412 前提条件失败 在服务器上测试前提条件时,部分请求标题字段中所给定的前提条件估计为FALSE。...HTTP 错误 405 405 不允许此方法 对于请求所标识的资源,不允许使用请求行中所指定的方法。请确保为所请求的资源设置了正确的 MIME 类型。...HTTP 错误 412 412 前提条件失败 在服务器上测试前提条件时,部分请求标题字段中所给定的前提条件估计为FALSE。...HTTP 错误 405 405 不允许此方法 对于请求所标识的资源,不允许使用请求行中所指定的方法。请确保为所请求的资源设置了正确的 MIME 类型。

    3.9K20

    在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用

    Web API的内容协商机制,我们现在改用Fiddler来发送调用Web API的HTTP请求。...在本例中,我们主要利用jQuery来实现以Ajax方式调用Web API,同时它也是其他两个框架(Bootstrap和KnockOut)的基础框架。...load:发送Ajax请求调用Web API以获取当前联系人列表,并将得到的联系人列表“赋值”给contacts属性。 showDialog:弹出“编辑联系人信息”对话框。...save:发送Ajax请求调用Web API以添加新的联系人或者修改现有某个联系人的信息。contact属性作为提交的数据,至于“添加”还是“修改”,同样是通过它是否具有相应的Id来决定。...delete:发送Ajax请求调用Web API以删除指定的联系人。联系人成功删除之后,load方法被调用以刷新当前联系人列表。

    5K110

    .ajax get 写法,原生Ajax写法(GET)

    (尚未调用open方法) 1(初始化)已调用send()方法,正在发送请求 2(发送数据)send()方法调用完成,但是当前的状态及http头未知 3(数据传送中)已接收部分数据,因为相应及http头不全...,这时通过responseText获取部分数据会出现错误 4(完成)数据接收完成,此时可以通过responseText获取完整的数据 status 请求状态 200(成功) 404(没有发现文件) 500...(服务器内部错误) responseText 请求成功后获取数据 原生ajax写法 ajax1.0,ie9及以下,ie10+支持ajax2.0 ajax2.0比ajax1.0: 1.多了FormData...对象 var xhr; if (window.XMLHttpR … 原生ajax与封装的ajax使用方法 当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考...上次许的愿,十月份看完asp.net,已经泡汤了,翻 … 原生Ajax 使用原生Ajax 验证用户名是否被注册 创建出注册信息: 注册信息 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人

    3.4K20

    ASP.NET (Core)WebApi参数传递实操演练

    在http 请求中,get 和 post 是最常用的。...Asp.NET Web API中Controller是如何解析从客户端传递过来的数据,然后赋值给Controller的参数的,也就是参数绑定或者模型绑定。 常见的绑定方式有如下四种。...请求Body(Body):通过在POST请求中将数据传入到Body中此时将绑定如上述Person对象中。 请求Header(Header):绑定数据到Http中的请求头中,这种相对来说比较少见。...3、ASP.NET WebAPI中FromUri和FromBody两类特性区别 1)、【FromUri】特性 应用【FromUri】特性,Web API Action中参数将从URL中解析数据。...在Web API框架下有4中内置的媒体格式化器,分别是: 1:JsonMediaTypeFormatter,对应的content-type是:application/json, text

    4.3K20

    细说ASP.NET Core静态文件的缓存方式

    一、前言   我们在优化Web服务的时候,对于静态的资源文件,通常都是通过客户端缓存、服务器缓存、CDN缓存,这三种方式来缓解客户端对于Web服务器的连接请求压力的。   ...本文指在这三个方面,在ASP.NET Core中静态文件的实现过程和使用方法进行阐述。当然也可以考虑使用反向代理的方式(例如IIS或Nginx),这些不是本文讨论的内容。   ...那么在StaticFileMiddleware中间件中,我们怎么设置这个Header呢?...在ASP.NET Core中Tag Hepers为我们提供了这样的API: ...我们在使用CDN时,因为还要进行开发任务,一般我们都要有两套地址,一套是CDN上的文件地址,一套是本地调试开发用的地址。ASP.NET Core中也为我们提供了Tag Helper来解决这样的问题。

    2.5K20

    Web API--入门--(一)ASP.NET Web API 2(C#)入门

    ASP.NET Web API是在.NET Framework之上构建Web API的框架。在本教程中,您将使用ASP.NET Web API创建返回产品列表的Web API。...本教程中使用的软件版本 Visual Studio 2013 Web API 2 创建一个Web API项目 在本教程中,您将使用ASP.NET Web API创建返回产品列表的Web API。...在“ 新建ASP.NET项目 ”对话框中,选择“ 空”模板。在“添加文件夹和核心参考”下,查看Web API。单击确定。 ? 注意 您还可以使用“Web API”模板创建一个Web API项目。...获取产品列表 要获取产品列表,请发送HTTP GET请求到“/ api / products”。 jQuery getJSON函数发送一个AJAX请求。对于响应包含JSON对象的数组。...如果您输入的ID无效,则服务器返回HTTP错误: ? 使用F12查看HTTP请求和响应 当您使用HTTP服务时,查看HTTP请求和请求消息非常有用。

    5.4K10

    Windows8异步编程的注意事项

    因为Windows8 App虽然后台运行程序也是一个类似IE的进程,但是app和网页在开发中还是有一些不同,所以以下有两点总结。 1.Ajax请求,相同的url会缓存。...ASP.NET推出Web API之后,后台最好不要写.aspx页面或者hanler,最好都使用Web API,这样传统的web应用,mobile app和Windows8 app都可以调用相同的数据服务接口...这里又要提到Web API,等项目结束之后把后台的代码重构为web api出来。...我在写代码时,把Ajax异步请求的概念忘了,WinJS.xhr()发送请求之后不能马上获得数据,这就是异步。...所以在代码执行到showUserInfo()内部时,可能userInfo还没有重新赋值,所以还是null。旁边的同事帮我看了一眼就发现我的错误做法。

    1.2K100
    领券