非简单跨越请求

2018-11-22  本文已影响0人  peipeicn

当浏览器发现请求是跨越的时候,会先进行预检请求,之后才会进行第二次请求来获取数据。

1. 预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的。头信息里面,关键字段是Origin,表示请求来自哪个源。

除了Origin字段,"预检"请求的头信息包括两个特殊字段。

  1. Access-Control-Request-Method该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT。
  2. Access-Control-Request-Headers该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是X-Custom-Header。

2.服务器接收到请求进行验证之后,进行输出响应

  1. Access-Control-Allow-Origin字段,表示http://api.bob.com可以请求数据。该字段也可以设为星号,表示同意任意跨源请求。
  2. Access-Control-Allow-Methods该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
  3. Access-Control-Allow-Headers如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。
  4. Access-Control-Allow-Credentials该字段与简单请求时的含义相同。
  5. Access-Control-Max-Age该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求。

如果服务器否定了"预检"请求,会返回一个正常的HTTP回应,但是没有任何CORS相关的头信息字段。这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

image.png

3. 浏览器的正常请求和回应

一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,
都会有一个Origin头信息字段。服务器的回应,
也都会有一个Access-Control-Allow-Origin头信息字段。


image.png
//MessageHandler跨域
    public class SimpleCorsHandler : DelegatingHandler
    {
        protected async override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request,
                                    CancellationToken cancellationToken)
        {
            if (request.Headers.Contains("Origin"))
            {
                if (request.Method == HttpMethod.Options)
                {
                     String origin = request.Headers.GetValues("Origin").First(); 
                     var currentAccessControlRequestMethod =
                      request.Headers.GetValues("Origin").FirstOrDefault();

                    var response = new HttpResponseMessage(HttpStatusCode.OK);
                    response.Headers.Add("Access-Control-Allow-Methods", "*");
                    response.Headers.Add("Access-Control-Allow-Headers", "*");
                    response.Headers.Add("Access-Control-Allow-Origin", "*");
                    response.Headers.Add("Access-Control-Max-Age", "1728000");
                    return response;
                }
            }
            HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
            if(request.Headers.Contains("Origin") && request.Method != HttpMethod.Options)
            {
                response.Headers.Add("Access-Control-Allow-Origin", "*");
            }
            return response;
        }
    }

参考:

跨域CORS原理及调用具体示例

.Net WebApi消息拦截器之MessageHandler的示例

上一篇下一篇

猜你喜欢

热点阅读