在浏览器中使用ajax请求webApi的的接口时,会出现以下500的错误。原因在于浏览器出于安全的考虑默认不允许在js中跨域调用api。

is not allowed by Access-Control-Allow-Origin.

解决办法:

服务端配置:

NuGet安装 System.Web.Cors;

WebApiConfig.cs文件中using

using System.Web.Cors;
  • 添加跨域访问配置(一)
/*
/ /来源:
//逗号分隔的来源列表,允许访问该资源。使用
//“*”允许一切。
/ /
/ /头文件:
//由资源支持的以逗号分隔的标题列表。使用“*”
/ /允许所有。使用null或空字符串不允许。
/ /
/ /方法:
//由资源支持的、以逗号分隔的方法列表。使用“*”
/ /允许所有。使用null或空字符串不允许。
*/


config.EnableCors(new EnableCorsAttribute("来源", "头文件", "方法"));

//例:
config.EnableCors(new EnableCorsAttribute("https://blog.methodname.com", "", ""));
  • 添加跨域访问配置(二)
//1、在web.config中添加一下配置
  <appSettings>
        <add key="cors:allowedOrigin" value="*" /><!-- 来源 -->
        <add key="cors:allowedHeaders" value="*" /><!-- 头文件 -->
        <add key="cors:allowedMethods" value="*" /><!-- 方法 -->
  </appSettings>

//2、在<code>WebApiConfig.cs</code>添加以下代码
   var allowOrigins = ConfigurationManager.AppSettings["cors_allowOrigins"];
   var allowHeaders = ConfigurationManager.AppSettings["cors_allowHeaders"];
   var allowMethods = ConfigurationManager.AppSettings["cors_allowMethods"];
   var globalCors = new System.Web.Http.Cors.EnableCorsAttribute(allowOrigins,allowHeaders,allowMethods);
   config.EnableCors(globalCors);
   
   //效果和第一种一样,只是这种将跨域配置在配置文件中,方便更改和维护。
  • 在多人开发中可能会出现同事在更新你提交的跨域配置后,项目中并不会有使用NuGet安装 System.Web.Cors;,检查各项配置都没有问题的时候,浏览器调用这些接口依然会报跨域的错误,这个时候可能需要检查一下是否有安装System.Web.Cors。
前端配置:

如果使用的是jQuery的话,需要将jQuery的跨域支持打开。

    jQuery.support.cors = true;

或者使用jsonp

    $.ajax({
        type: "POST",
        url: "xxxx",
        async: true,
        dataType:"JSONP"
     });
IE9以下ajax跨域问题只能设置浏览器来解决这个问题
  1. 点击浏览器右上角的工具按钮(Alt+X)
  2. 点击工具菜单栏的Internert选项(O)
  3. 切换至安全界面,找到下发的祁东包含模式选项,取消勾选状态。
  4. 点击确定,重启IE浏览器。
  5. 如浏览器有安全设置提醒,忽略即可。

^_^心情大好~