Angular 笔记 三、 跨域请求、自定义Header、预检验(option)总结

前端之家收集整理的这篇文章主要介绍了Angular 笔记 三、 跨域请求、自定义Header、预检验(option)总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

HTTP响应头和请求头信息对照表
浏览器 AJAX 跨域请求访问控制
HTTP Method 详细解读(GET HEAD POST OPTIONS PUT DELETE TRACE CONNECT)

从MVC到前后端分离,必然要处理CORS(Cross-Origin Resource Sharing)/同源策略(same-origin policy)的问题。Cross-Origin:跨域(源)。same-origin:同源(域)。

如果不同源:
Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
AJAX 请求不能发送。:同源政策规定,AJAX请求只能发给同源的网址,否则就报错。可使用 @H_301_14@JSONP、WebSocket、CORS规避。
浏览器同源政策及其规避方法详细参考 此链接

跨域资源共享 CORS 详解

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

因此,@H_301_14@实现CORS通信的关键是服务器:Web端发送跨域请求(简单请求/非简单请求),服务器预处理请求,允许请求则处理,否则不处理。

@H_301_14@AJAX 请求CORS规避方法
CORS请求分成两类:1,简单请求。2。非简单请求

  1. 简单请求

    1.  请求方法是以下三种方法之一:
        HEAD、GET、POST
    2. HTTP的头信息不超出以下几种字段:
        Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain。
        这就意味着,如果请求中添加自定义Header,就属于非简单请求,就需要Server端处理预检验(Option)请求。
    3.  简单请求基本流程
        web端:


    浏览器自动携带Origin: http://localhost:4200

    4.  Serer端要对请求做响应处理:允许哪些域(源)请求(Access-Control-Allow-Origin),是否允许 发送请求的域(源)发送Cookie(Access-Control-Allow-Credentials)【如果不允许,web端withCredentials即便设为True也将无法传递cookie】
    
    5.  以上,web端请求发送,server端允许发送,然后服务端才接受web端的请求与传递的cookie,并做进一步的出来。
  2. 非简单请求
    非简单请求发送请求时,从浏览器端来看是浏览器发送了2次请求,第1次是option方法的请求,是预检请求;第2次是实际的请求。
    简单请求从浏览器端来看是只发送1此实际的请求,内部处理上算是发送了一次半的请求,服务器响应后的半次请求不是从浏览器发出(纯属臆测)。

    1. 预检请求
      @H_301_14@web端,请求中添加了个自定义header:X-CustomToken,请求发送时会先执行option方法的请求。


      预检请求在 MVC项目执行时,预检阶段不会执行Action,必须要在请求发出前做处理:

      @H_301_14@server端:对应【从MVC到前后端分离】里的SecurityAspect 一段

      Application_BeginRequest()执行完预检请求判断,并做处理(响应预检请求:Access-Control-Allow-Methods、Access-Control-Allow-Headers、Access-Control-Allow-Credentials等),请求会再次进入Application_BeginRequest(),进行第二次实际方法的请求,请求方法不再是Option,之后才会去执行Action。
      Web端第1次预检请求(Option)

    2. 实际请求
      Web端第2次实际请求(POST)
    3. 获取Response的自定义header
      如果是跨域请求(CORS), 自定义的Header会从server端的response headers 带回浏览器,但始终将无法通过代码response.headers.get(“X-TOKEN”)取得, Server-side必须要添加 “Access-Control-Expose-Headers” 到Response中才行。

被 跨域自定义Header请求 问题困扰了这么久总是解决了,最后能解决要感谢博客园里这位大兄弟 链接跨域请求web api,如果headers传递数据,请求无响应
关键点:Application_BeginRequest()方法
ASP.NET Requst请求事件处理顺序:

之后可能还会遇到“IIS中WebDav和OPTIONSVerbHandler会对OPTIONS请求有特殊处理,会截断后面的请求”的问题

<remove name="WebDav" />
<remove name="OPTIONSVerbHandler" />

“这两个到webconfig里终于在iis里正常了”。

另附OPTIONSVerbHandler相关链接,以后备查:
关于跨域的二三事

asp.net web api 中的坑。 web.config 中 remove name=”OPTIONSVerbHandler” 需要去掉。

Angular访问WebApi出现options方法

猜你在找的Angularjs相关文章