Web API 跨域问题解决方案：CORS

• 同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容
• 跨域问题：因为同源策略，所以我们不同项目之间的调用会被浏览器所阻止
• 解决原理：采用CORS(Cross-Origin Resource Sharing，跨域资源共享)，主要是通过向Http的请求报文和响应报文里面加入相应的标识告诉浏览器它能访问哪些域名的请求，例如向响应报文里面增加这个Access-Control-Allow-Origin:http://localhost:8081，就表示支持http://localhost:8081里面的所有请求访问系统资源
• 对于下列四种方法中的三个类似参数origins、headers和methods
• origins配置允许访问的域名，多个域名以逗号分隔即可，域名一定要完整，如果是ip地址前面要加上“http”，只使用IP的话一定会失效的
• headers配置所支持的资源
• methods配置支持的方法：GET, POST, PUT, DELETE, OPTIONS等
• 第一种：配置文件Web.Config解决方法

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

• 第二种：使用CORS跨域，在NuGet程序包中下载"microsoft.aspnet.webapi.cors"

public static class WebApiConfig//App_Start文件夹
{
    public static void Register(HttpConfiguration config)
    {
        //跨域配置
        config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
        // Web API 路由
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

• 第三种：在第二种的基础上进行改良

<appSettings>//Web.Config
    <add key="cors_allowOrigins" value="*"/>
    <add key="cors_allowHeaders" value="*"/>
    <add key="cors_allowMethods" value="*"/>
</appSettings>

public static class WebApiConfig//App_Start文件夹
{
    public static void Register(HttpConfiguration config)
    {
        //跨域配置
        var allowOrigins = ConfigurationManager.AppSettings["cors_allowOrigins"];
        var allowHeaders = ConfigurationManager.AppSettings["cors_allowHeaders"];
        var allowMethods = ConfigurationManager.AppSettings["cors_allowMethods"];
        var globalCors = new EnableCorsAttribute(allowOrigins, allowHeaders, allowMethods){
            SupportsCredentials = true
        };
        config.EnableCors(globalCors);
        // Web API 路由
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

• 第四种：如何只是对某一些API进行跨域，可以直接在这些API的控制器上进行设置

//还需要WebApiConfig文件中的Register方法启用config.EnableCors()
[EnableCors(origins: "http://127.0.0.1:5501", headers: "*", methods: "GET,POST,PUT,DELETE")]
//http://127.0.0.1:5501代表了请求的资源地址
public class Ch04Controller : ApiController
{
    [HttpGet]
    public string GetAllChargingData(){
        return "Success";
    }
}