在前后端分离的项目中,前端和后端可能是在不同的服务器上,也可以是Docker上,那就意味着前端请求后端Restful接口时,存在跨域情况。

后端在做了通用的跨域资源共享CORS设置后,前端在做ajax跨域请求时,如果需要在自定义请求头中设置类似于Authorization认证属性时,

则该ajax请求就从简单请求变为复杂请求。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)请求。

2、非简单请求 
非简单请求发送请求时,从浏览器端来看是浏览器发送了2次请求,第1次是option方法的请求,是预检请求;第2次是实际的请求。

浏览器会先发送一个options方法的ajax的预请求。

这时后端需要在拦截器或者过滤器里面设置允许options请求。设置自定义的请求头属性:Authorization

获取Response的自定义header

如果是跨域请求(CORS), 自定义的Header会从server端的response headers 带回浏览器,但始终将无法通过代码response.headers.get(“X-TOKEN”)取得, 拦截器或者过滤器必须要添加 “Access-Control-Expose-Headers” 到Response中才行。

解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案的更多相关文章

  1. 由一个“两次请求”引出的Web服务器跨域请求访问问题的解决方案

    http://blog.csdn.net/cnhnnyzhy/article/details/53128179 (4)Access-Control-Max-Age 该字段可选,用来指定本次预检请求的有 ...

  2. 利用gulp解决前后端分离的header/footer引入问题

    在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...

  3. 利用CORS解决前后端分离的跨域资源问题

    CORS 即CrossOrigin Resources Sharing-跨域资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求.它是一个妥协,有更大的灵活性,但比起简单地允许所有这些 ...

  4. 解决web资源跨域请求问题

    参考地址: http://my.oschina.net/lichaoqiang/blog/317823 在浏览器请求中,出现跨域访问资源的问题,我们肯定会遇到.如果跨域请求被阻止,有可能导致css.j ...

  5. web api 跨域请求,ajax跨域调用webapi

    1.跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服 ...

  6. ASP.NET web api 跨域请求

    1.学习文章:AJAX 跨域请求 - JSONP获取JSON数据 1.asp.net代码 参考文章:http://www.sxt.cn/info-2790-u-756.html (1).增加CorsH ...

  7. mock的使用及取消,node模仿本地请求:为了解决前后端分离,用户后台没写完接口的情况下

    借鉴:https://www.jianshu.com/p/dd23a6547114 1.说到这里还有一种是配置node模拟本地请求 (1)node模拟本地请求: 补充一下 [1]首先在根目录下建一个d ...

  8. 解决前后端分离后的Cookie跨域问题

    一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...

  9. Nginx完美解决前后端分离端口号不同导致的跨域问题

    笔者在做前后端分离系统时,出现了很多坑,比如前后端的url域名相同,但是端口号不同.例如前端页面为:http://127.0.0.1/ , 后端api根路径为 http://127.0.0.1:888 ...

随机推荐

  1. 【BZOJ4868】期末考试(整数三分)

    题意: 有n位同学,每位同学都参加了全部的m门课程的期末考试,都在焦急的等待成绩的公布.第i位同学希望在第ti天 或之前得知所.有.课程的成绩.如果在第ti天,有至少一门课程的成绩没有公布,他就会等待 ...

  2. Codeforces 404D Minesweeper 1D

    题意: 给定字符串,其中'*'表示地雷,'1'表示左/右边有一个地雷相邻,'2'表示左右两边均有地雷相邻,'0'表示左右均无地雷相邻,'?'表示待定,可填入0,1,2或者地雷,有多少种表示方法使字母串 ...

  3. Caocao's Bridges-HDU4738(Tarjin+求桥)

    http://acm.hdu.edu.cn/showproblem.php?pid=4738 题目大意: 给定n个点和m条边  和每条边的价值,求桥的最小价值(最小桥) 看着挺简单的但是有好多细节: ...

  4. JavaScript为字符串添加样式

    <script type="text/javascript"> var txt="Hello World!" document.write(&quo ...

  5. HashMap的工作原理以及代码实现,为什么要转换成红黑树?

    原理参考:https://blog.csdn.net/striveb/article/details/84657326 总结: 为什么当桶中键值对数量大于8才转换成红黑树,数量小于6才转换成链表? 参 ...

  6. how to read openstack code

    本文的目的不是介绍openstack.我们这里假设你已经知道了openstack是什么,能够做什么.所以目的是介绍如何阅读openstack的代码.通过读代码来进一步学习openstack. 转载要求 ...

  7. 介绍css 的3D 变换(3D transform)

    https://desandro.github.io/3dtransforms/docs/card-flip.html ---------------------------------------- ...

  8. JS原生DOM操作总结

    DOM的主要操作——增.删.改.查节点 (1) 查找节点 document.getElementById('div1') document.getElementsByName('uname') doc ...

  9. JS获取地址栏并拼接參数

    比方地址栏是这种:http://www.aa.com/detail.aspx?code=1&start=2014-12-01&end=2014-12-23&name=abc 要 ...

  10. PS如何绘制虚线圆

    1 绘制一个圆的路径   2 选择铅笔工具,然后点击"画笔笔尖形状",选好笔尖的直径和间距(不同的直径对应不同的间距,没有标准数值,自己推拉滑动条就可以了)   3 在路径选项卡, ...