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

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请求的原因，再结合自己的业务，多考虑一下，是否合适。

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