No 'Access-Control-Allow-Origin' header is present on the requested resource——Web Api跨域問題

最近使用C#寫了一個簡單的web api項目，在使用項目中的.cshtml文檔測試的時候沒有任何問題，但是在外部HBuilder上面編寫.html通過Ajax調用web api路徑時報錯：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

導致這個問題的原因是在跨域訪問web api的api時，C#自帶的web api並不能支持跨域訪問，如果需要，可以更改配置來實現。

1、更改Web.config文件，加上如下代碼

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="Content-Type,Token" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
</httpProtocol>

 

配置了Web.config文件后，平常使用的GET，POST可以使用，但是使用PUT請求的時候還是會報405的錯，即method not allow，然后需要配置Global.asax文件

插入如下代碼：

        protected void Application_BeginRequest()
        {
            //如果是預請求（OPTIONS），則結束當前請求
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.End();
            }
        }

配置這兩個文件之后，web api就可以跨域訪問了。

 

解決方案二：

不用配置Global.asax，純JS實現PUT請求。

$.ajax({
            url: "http://localhost:63470/apiserver/Stu",
            type: "Post",
            dataType: "json",
            data: { _method: "PUT", Id: "6", StuName: "test", Age: 10 },
            success: function (d) {
                console.log(d);
            }
        })