cors跨域之简单请求与预检请求(发送请求头带令牌token) - SegmentFault 思否

标签: | 发表时间:2021-10-06 15:20 | 作者:
出处:https://segmentfault.com

引子

看前你需要知道:

cors跨域的问题解决的根本在于后端,前端只能暂时阻止浏览器禁用跨域行为,或则自己开启代理调试;

前端自己暂时性解决的办法一览:

  • disable-web-security: Mac中命令行加跨域标志打开Chrome, 参考文章, 下面的示例是我在mac中使用的:

            // /Users/tang/Documents/somthing/cross是我的跨域浏览器文件存储地址,你需要改成你自己的  
    open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/tang/Documents/somthing/cross
  • webpackServer代理或则开启nginx代理 , 参考文章

自从从JAVA伪全栈转前端以来,学习的路上就充满了荆棘(奇葩问题),而涉及前后端分离这个问题,对cors的应用不断增多,暴露出的问题也接踵而至。
这两天动手实践基于Token的WEB后台认证机制,看过诸多理论( 较好一篇推荐),正所谓虑一千次,不如去做一次。 犹豫一万次,不如实践一次,所以就有了下文,关于token的生成,另外一篇文章会细讲,本篇主要讨论在发送ajax请求,头部带上自定义token验证验证,暴露出的跨域问题。

先说说定义

  • 同源策略:是一项约定,是浏览器的一种安全行为。是为了阻止一个域下的文档或脚本读取 另一个域下的资源污染自身,所以拦截了响应。这是一个用于 隔离潜在恶意文件的重要安全机制
  • CORS:跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同网域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的现代版。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让前端用常用的 XMLHttpRequest,这种方式的错误处理比JSONP要来的好,JSONP对于 RESTful 的 API 来说,发送 POST/PUT/DELET 请求将成为问题,不利于接口的统一。但另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作。不过现代的浏览器(IE10以上)基本都支持 CORS。
  • 预检请求(option):在 CORS 中,可以使用 OPTIONS 方法发起一个预检请求(一般都是浏览检测到请求跨域时,会自动发起),以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法;Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断,是否接受接下来的实际请求。服务器所返回的 Access-Control-Allow-Methods 首部字段将所有允许的请求方法告知客户端。该首部字段与 Allow 类似,但只能用于涉及到 CORS 的场景中。
    OPTIONS /resources/post-here/ HTTP/1.1 
    Host: bar.other 
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
    Accept-Language: en-us,en;q=0.5 
    Accept-Encoding: gzip,deflate 
    Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
    Connection: keep-alive 
    Origin: http://foo.example 
    Access-Control-Request-Method: POST 
    Access-Control-Request-Headers: X-PINGOTHER, Content-Type

问题描述

话不多说,先上代码:

    前端(ajax库:vue-resource)
        userLogin:function(){
            this.$http({
                method:'post',
                url:'http://localhost:8089/StockAnalyse/LoginServlet',
                params:{"flag":"ajaxlogin","loginName":this.userInfo.id,"loginPwd":this.userInfo.psd}, 
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
                credientials:false, 
                emulateJSON: true                    
            }).then(function(response){
                sessionStorage.setItem("token",response.data);
                this.isActive =false;
                document.querySelector("#showInfo").classList.toggle("isLogin");
            })                 
        }
后端相关配置:
        response.setHeader("Access-Control-Allow-Origin", "http://localhost"); //允许来之域名为http://localhost的请求        
    response.setHeader("Access-Control-Allow-Headers", "Origin,No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With, userId, token");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); //请求允许的方法
    response.setHeader("Access-Control-Max-Age", "3600");    //身份认证(预检)后,xxS以内发送请求不在需要预检,既可以直接跳过预检,进行请求(前面只是照猫画虎,后面才理解)

关于上面一段代码,是我的用户首次登录认证,生成token令牌,保存在sessionStorage中,供后面调用;需要说明的是,前端服务器地址是:localhost:80,后端服务器地址:localhost:8089,所以前后端涉及到跨域,自己在后端做了相应的跨域设置:response.setHeader("Access-Control-Allow-Origin", "http://localhost"); 所以登录认证,安全的实现了跨域信息认证,后端相应发送回来了相应的token信息。
但获取到token后,想在需要的时候,在请求的头部携带上这个令牌,来做相应的身份认证,所以自己在请求中做了这些改动(有标注),后端没改动,源码:

    checkIdentity:function(){
            let token =sessionStorage.getItem('token');
            this.$http({
                method:'post',
                url:'http://localhost:8089/StockAnalyse/LoginServlet',
                params:{"flag":"checklogin","isLogin":true,"token":token}, 
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
                headers:{'token':token},        //header中携带令牌信息            
                credientials:false, 
                emulateJSON: true                    
            }).then(function(response){
                console.log(response.data);
            })                 
        }

但实际上在devtools打印了如下错误信息:Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost' is therefore not allowed access.仔细想一想,好像,似乎这个问题遇到过,还提过问,确实提过, 链接在这里。但这次的设置和上次一样,就在header里多加了一个自定义token,但却报了和上次没有设置headers: {'Content-Type': 'application/x-www-form-urlencoded'}一样的错误信息,于是,不知所措,算了,重头再来,好好百度,研究一下cors跨域。

理论学习

运气不错,找到了 一篇好文,文章讲的很细,也找到自己问题的所在:触发 CORS 预检请求。
引用原文的话加以自己总结:跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request:似曾相识有没有?诶,对,上面那个错误信息中,就有一个这样陌生的词汇),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。

在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。所以跨域请求分两种: 简单请求和预检请求
一次完整的请求不需要服务端预检,直接响应的,归为简单请求;而响应前需要预检的,称为预检请求,只有预检请求通过,才有接下来的简单请求。对于那些是简单请求,那些会触发预检请求,文章做了详细的总结,这里列出触发预检请求的条件(不知道脑子为啥会想到那些会触发BFC的条件),不要跑题,原文是这样总结的:
当请求满足下述任一条件时,即应首先发送预检请求:

    使用了下面任一 HTTP 方法:
PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH

人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为:
Accept
Accept-Language
Content-Language
Content-Type (but note the additional requirements below)
DPR
Downlink
Save-Data
Viewport-Width
Width

Content-Type 的值不属于下列之一:
application/x-www-form-urlencoded
multipart/form-data
text/plain

问题分析

所以,再来看自己两次犯错(第一次是没有设置:headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 第二次是设置自定义header,headers:{'token':token}。很巧,有没有,一次少,一次多,都点燃了导火索),其实都是触发了预检请求。对于第一次的错误,很好解决,增加headers: {'Content-Type': 'application/x-www-form-urlencoded'},就解决了, 关于Conten-Type的几种取值,你需要知道的。但对于第二个错误,好像没法向第一种那样,将预检请求转变为简单请求,所以,只有寻找方法怎么在后端实现相应的预检请求,来返回一个状态码2xx,告诉浏览器此次跨域请求可以继续。所以注意力转向后端。
关于JAVA实现预检请求,基本都是采用过滤器,不要问我为什么不是监听器或者拦截器(我就是个伪全栈,就不要相互为难了,自己百度之),自定义(copy)了一个filter,并在web.xml中进行了设置。源码:

    Filter接口实现部分:
package stock.model;
import java.io.IOException;   
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;    
import org.apache.commons.httpclient.HttpStatus;   //这里需要添加commons-httpclient-3.1.jar
public class CorsFilter implements Filter {     //filter 接口的自定义实现
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        response.setHeader("Access-Control-Allow-Origin", "*");           
        String token = request.getHeader("token");
        System.out.println("filter origin:"+token);//通过打印,可以看到一次非简单请求,会被过滤两次,即请求两次,第一次请求确认是否符合跨域要求(预检),这一次是不带headers的自定义信息,第二次请求会携带自定义信息。
        if ("OPTIONS".equals(request.getMethod())){//这里通过判断请求的方法,判断此次是否是预检请求,如果是,立即返回一个204状态吗,标示,允许跨域;预检后,正式请求,这个方法参数就是我们设置的post了
          response.setStatus(HttpStatus.SC_NO_CONTENT); //HttpStatus.SC_NO_CONTENT = 204
          response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");//当判定为预检请求后,设定允许请求的方法
          response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, Token"); //当判定为预检请求后,设定允许请求的头部类型
          response.addHeader("Access-Control-Max-Age", "1");  // 预检有效保持时间                       
        }
        filterChain.doFilter(servletRequest, servletResponse);
    }
    @Override
    public void destroy() {     
    }
}
web.xml配置部分
<filter>
<filter-name>cors</filter-name>
<filter-class>stock.model.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

关于Access-Control-Max-Age

最近又开始写java,再回来看这个,发现当时Access-Control-Max-Age设置了1.其实这样写有很大问题,因为每个复杂请求都会发两次。显然这样是当代所不能接受的,所以Max-Age的值适合设的大一些,具体多大很业务需求相关。另外Access-Control-Max-Age不是针对请求域名有效的,是请求的完成路径有效的,比如第一次发出。

    www.exanple.com/api/corsGet

会产生一次options请求和一次post请求,然后我再请求一次,这时没有预检请求了,只有post请求。但再发送一次

    www.exanple.com/api/corsSave

请求,会发现又产生了一次options请求和一次post请求,所以Access-Control-Max-Age不是针对相同的origin有效,而是针对相同的requestUrl有效。很重要哦。

其实更严格来讲,是针对请求头和请求方法,比对是否一致,来决定是否需要重新发起预检;另外,如果调试模式勾选了disable-cache,也会导致每次都会预检,导致Access-Control-Max-Age设置无效;

结论

当在后端实现添加上面的源码后,皆大欢喜,问题得以解决,补上失败和成功,自己截下的两张请求响应图。

图片描述

仔细看请求响应失败发起响应那张图,在General的数据集中,可以看到方法是options,而非代码指定的post请求,所以这是一次浏览器发出的一次预检请求,让服务器确认此IP是否有访问的权限,如果有,服务器需要返回一个2xx的状态码给浏览器。紧接着再发起一次简单请求。如下面在devtools中的截取图片(为了对比清除,我把两次分别截取,做了拼接,因为不会做动态图)。可以看到同一个post请求,实际上产生了两次网络连接。

图片描述

但关于cors,要去探索的,还有很多很多,所以遵循革命语录:实践(有时也可以是时间)是检验真理的唯一标准,是没有错的。后续有新的收获,再补充。

相关 [cors token segmentfault] 推荐:

cors跨域之简单请求与预检请求(发送请求头带令牌token) - SegmentFault 思否

- -
cors跨域的问题解决的根本在于后端,前端只能暂时阻止浏览器禁用跨域行为,或则自己开启代理调试;. 前端自己暂时性解决的办法一览:. disable-web-security: Mac中命令行加跨域标志打开Chrome,. 参考文章, 下面的示例是我在mac中使用的:. // /Users/tang/Documents/somthing/cross是我的跨域浏览器文件存储地址,你需要改成你自己的 open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/tang/Documents/somthing/cross.

NGINX配置跨域CORS支持的正确方式 - SegmentFault 思否

- -
在做 H5 的时候难免会跨域请求后端 API,虽然用 HBuilder 内置的浏览器不会有跨域问题(这个应该是做了内部处理),但是那个内置浏览器真尼妈坑爹,过一会就会卡死,导致 HBuilder 无响应,杀进程也是无济于事,只能重启,重复几次谁受的了. 后来发现用外部的浏览器不会有这个问题,但是又面临跨域.

Elasticsearch as Database - taowen - SegmentFault

- -
【北京上地】滴滴出行基础平台部招聘 Elasticsearch 与 Mysql binlog databus 开发工程师. 内推简历投递给: [email protected] 推销Elasticsearch. 时间序列数据库的秘密(1)—— 介绍. 时间序列数据库的秘密(2)——索引.

AJAX POST&跨域 解决方案 - CORS

- - JavaScript - Web前端 - ITeye博客
跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一.   和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.

SegmentFault问答排序算法

- - 标点符
SegmentFault 参考了 Stack Overflow的热门算法设置了自己的排序算法,具体排序算法如下:. 对于热门文章,使用了如下公式:. views:浏览量,对浏览量做了一次去对数处理,主要是为了防止某些浏览量较大的文章异军突起,待在榜单迟迟不动. recommendScore/collectScore:文章的推荐数和收藏数,直接加和到分子中,作为文章热门程度的考虑因素.

RSA的SecureID token数据被偷了?

- ripwu - 张志强的网络日志
博客 » 记事本 » 密码学 ». WSJ报道:RSA承认其数据被偷,4000万SecureID token需要被更新. 中国银行银行密钥用的就是RSA生产,就是下图这玩意儿,手里有这玩意儿的同学们要小心了(当然,如果你的账户里的钱没有6位数以上,也不用太担心,毕竟网银的安全性不全依赖于这个设备):.

什么是 JWT -- JSON WEB TOKEN - 简书

- -
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准(. (RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景. JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑所必须的声明信息,该token也可直接被用于认证,也可被加密.

Lucene索引升级 - rainystars' Blog - SegmentFault

- -
由于Lucene文件格式从2到3以及从3到4版本时都发生了重大的改变,造成了高版本无法读取低版本的数据,使用Lucene中的IndexUpgrader方法先将版本从2升到3,然后再从3升级到4. 从版本2升级到版本3时,需要使用lucene3的jar包,我使用的lucene3.6的jar包,我需要处理的索引是在一个文件夹中所存在的一系列索引文件,所以需要循环来遍历每个目录.

nginx的upstream异常 - code-craft - SegmentFault 思否

- -
max_fails与fail_timeout. max_fails默认值为1,fail_timeout默认值为10秒. 如果探测所有节点均失效,备机也为失效时,那么nginx会对所有节点恢复为有效,重新尝试探测有效节点,如果探测到有效节点则返回正确节点内容,如果还是全部错误,那么继续探测下去,当没有正确信息时,节点失效时默认返回状态为502,但是下次访问节点时会继续探测正确节点,直到找到正确的为止.

微信平台的token安全验证(转)

- - 行业应用 - ITeye博客
本文目标:学习一种比较安全的服务器间互相验证身份的方式. 问题:开发微信公众平台接口,开发者的服务器为了确保请求是否来自微信服务器,应该如何去做. 1)  在微信管理页面上填写URL和TOKEN,开发者服务器上也记录同样的TOKEN. 2)  微信服务器发送HTTP请求,附带上参数(注意TOKEN是不会被传输的).