webApi跨域问题备忘

在浏览器中使用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. 如浏览器有安全设置提醒，忽略即可。

^_^心情大好~