js POST调用api接口时,由于OPTIONS请求导致服务器异常

2023-03-02,,,,

1.学习心得

当你搜到这个问题时,就表示你已经知道了脚本POST请求接口时,会先执行一次OPTIONS类型的请求。至于为什么会这样,在此就不做描述了,想知道的小伙伴可以查一下;本文主要将我在现实中遇到的问题以及怎么解决的做一个描述;这是我第一次写,不合适的地方还请见谅。

虽然说OPTIONS请求时不太重要,但服务端还是会接收并处理的,当我们忽略这次操作去写代码的时候,很大可能会栽在这里。

2.问题描述

当时我在写一个webapi类型的项目,在对项目进行允许跨域访问设置后,就开始写接口了。

设置代码如下:

2.1 在全局应用函数Global.asax中加入

 protected void Application_BeginRequest()
{
//OPTIONS请求方法的主要作用:
//1、获取服务器支持的HTTP请求方法;也是黑客经常使用的方法。
//2、用来检查服务器的性能。如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,用以判断实际发送的请求是否安全。
if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
{
//表示对输出的内容进行缓冲,执行page.Response.Flush()时,会等所有内容缓冲完毕,将内容发送到客户端。
//这样就不会出错,造成页面卡死状态,让用户无限制的等下去
Response.Flush(); }
}

2.2 在配置文件中加入

<system.webServer>
<httpProtocol>
<!--新增加-->
<customHeaders>
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET" />
<add name="Access-Control-Allow-Headers" value="x-requested-with,content-type,clientKey,token" />
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Expose-Headers" value="servicekey"/>
</customHeaders>
</httpProtocol>
</system.webServer>

说到这里,顺便说一下,配置文件中的两处我自定义的参数值是什么意思

这个代表接口请求方,可以在头部添加“clientkey”,“token”这两个key;

这个代表接口返回时,调用方可以获取头部信息的哪些key。

调用的时候才发现,由于OPTIONS请求没有携带参数,导致我接口处理的时候,参数接收不到,而我也没有处理参数为空的情况;虽说犯这种错误我也有点不好意思,但我觉得并不是加个参数为空的处理就能完美解决的。

当然,这么解决貌似也可以。

3.解决方案

我的出发点是要让接口处理时,如果碰到OPTIONS请求,就不让接口进控制器了,直接结束此次执行。于是我就在全局应用函数Global.asax中多加了一行代码

这样一来,打断点是不走控制器了。那问题也解决了。

4.总结

虽然这样是可以解决问题,但并不是所有业务都需要这样写。解决问题应从实际出发,了解问题本质,在解决问题。有时间的小伙伴可以了解一下OPTIONS请求的原因,再结合自己的业务,多考虑一下,是否合适。

此文由博主精心撰写转载请保留此原文链接

版权声明:如有雷同纯属巧合,如有侵权请及时联系本人修改,谢谢!!!

js POST调用api接口时,由于OPTIONS请求导致服务器异常的相关教程结束。