asios 跨域 withCredentials

 

axios 跨域设置 

前端

axios.defaults.withCredentials = true; //配置为true

 

后端跨域设置

 

Access-Control-Allow-Credentials 设置为 true 表示前端允许待 cookie 信息过来，同时 Access-Control-Allow-Origin 就不能设置为星号了 

 

  <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://localhost:8080" /> 
        <add name="Access-Control-Allow-Credentials" value="true" />   设置 为true 
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>

 发生非简单请求还是不行

什么是非简单请求？

浏览器跨域请求分为，简单请求和非简单请求。凡是不属于简单请求的都是非简单请求

简单请求满足的条件

1 请求类型必须是 get post head 中的一种，Content-Type必须是 application/x-www-form-urlencoded,  multipart/form-data 或着 text/plain中的一个值。

2、没有自定义的 http 头部信息 

所谓的自定义头部，在实际的项目里，我们经常会遇到需要在header头部加上一些token或者其他的用户信息，用来做用户信息的校验

axios 中默认是 Content-Type 为 application/json;charset=UTF-8 

不符合上述第一天，所以属于非简单请求。

非简单请求-请求流程

1、非简单请求在发出请求之前首先要发一次预检请求

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

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

2 options 请求的回应

   收到服务端正确回复之后

3、发送正在的请求

 

asp.net mvc 自定义方法处理跨域 OPTIONS 请求

Global.asax 加入

  public override void Init()
        {
            this.AuthenticateRequest += WebApiApplication_AuthenticateRequest;
            base.Init();
        }

        // 处理跨域 post非简单请求,第一次OPTIONS
        void Application_BeginRequest(object sender, EventArgs e)
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.End();
            }
        }