ASP.NET WebAPI2复杂请求跨域设置的方法介绍

什么是跨域请求

跨域请求，简称CORS（Cross-Origin Resource Sharing），是客户端JavaScript在向不同域的服务器请求资源时，出于安全考虑受到了同源策略的限制，只能请求同域的资源。比如，在前端页面通过Ajax向API服务器请求数据时，由于域名不同，就会产生跨域请求。

复杂请求的场景

当请求的方法不是GET、POST或HEAD方法中的一种，或者请求中包含了非简单请求中所不支持的HTTP头，就会发起一个预检请求（OPTIONS），以确保该请求是安全的。预检请求会在正式请求之前发起，服务器回应了预检请求，并将所请求的信息汇报给客户端的JavaScript脚本后，才会发起正式请求。

解决跨域请求的方法

1. 添加响应头

在API服务器端，添加如下响应头信息即可解决简单跨域请求：

//添加响应头
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

其中，EnableCorsAttribute允许我们设置三个参数：

• 第一个参数：指定允许访问本服务的域名称，也可以使用通配符指定所有域名都可以访问；
• 第二个参数：指定允许跨域请求的HTTP方法，也可以使用通配符表示所有方法都可以跨域请求；
• 第三个参数：指定允许客户端使用的HTTP头信息，也可以使用通配符表示所有的HTTP头都允许使用。

2. 自定义消息处理管道

我们可以新建一个类，实现System.Web.Http.Cors.ICorsPolicyProvider接口，自定义消息处理管道。

public class CorsPolicy : ICorsPolicyProvider
{
    public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        var policy = new CorsPolicy
        {
            AllowAnyHeader = true,
            AllowAnyMethod = true
        };
        policy.Origins.Add("http://localhost:8080");
        return Task.FromResult(policy);
    }
}

// 在配置文件中调用自定义的消息处理管道。
config.SetCorsPolicyProviderFactory(new CorsPolicyFactory());

示例1：前端JavaScript代码调用WebAPI

//前端JavaScript代码
$.ajax({
    url: "http://localhost:5000/api/values",
    type: "POST",
    data: { name: "Joe" },
    crossDomain: true,
    success: function (response) {
        console.log(response);
    },
    error: function (xhr, status) {
        console.log(status);
    }
});

//API服务器端代码
[HttpPost]
public IHttpActionResult Post([FromBody]string name)
{
    return Ok("Hello, " + name);
}

示例2：Vue.js调用WebAPI

//前端Vue.js代码
var app = new Vue({
    el: '#app',
    data: {
        name: '',
        message: ''
    },
    methods: {
        sayHello: function () {
            var self = this;
            axios.post('http://localhost:5000/api/values', {
                name: self.name
            }, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function (response) {
                self.message = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }
});

//API服务器端代码
[HttpPost]
public IHttpActionResult Post([FromBody]HelloModel model)
{
    return Ok("Hello, " + model.Name);
}

public class HelloModel
{
    public string Name { get; set; }
}

总结

以上是ASP.NET WebAPI2复杂请求跨域设置的方法介绍，通过添加响应头或自定义消息处理管道，可以解决跨域请求的安全限制问题。在开发过程中，需要注意兼容性、错误处理等问题，避免出现安全漏洞和用户访问异常等情况。