文讨论了接口开发中的跨域CORS。CORS是从HTTP请求的安全策略衍生出来的浏览器协议。这个系统中的关键词包括同源策略、XMLHttpRequest、Ajax、前后端分离。尤其是在当前业界前后端分离的趋势下,跨域是前后端开发常用的通信方式。CORS背后的基本思想是使用自定义HTTP标头,让浏览器和服务器充分了解彼此,以确定请求或响应应该成功还是失败。上面这段话是指Cross-domainAjaxwithCross-OriginResourceSharing/,主要意思是CORS的核心思想是通过HTTP请求头进行通信,让客户端和服务端判断是否请求并成功接受响应。UsingCORS这里对跨域技术做了完整的阐述,有兴趣的可以看看。CORS协议的实现需要客户端和服务端的配合。也就是我们通常所说的跨域设置。在代表客户端的CORS请求期间,浏览器会添加一些额外的标头,有时还会发出额外的请求。浏览器将CORS请求分为两类:简单请求和不太简单的请求。).MicrosoftAPI设计指南中这段关于跨域的描述8.1.1。避免预检由于CORS协议可以触发预检请求,从而向服务器添加额外的往返行程,性能关键型应用可能有兴趣避免它们。CORS背后的精神是避免对旧的不支持CORS的浏览器能够发出的任何简单跨域请求进行预检。所有其他请求都需要预检。如果请求的方法是GET、HEAD或POST,并且除了Accept、Accept-Language和Content-Language之外不包含任何请求标头,则请求是“简单的”并且避免预检。对于POST请求,也允许使用Content-Type标头,但前提是其值为“application/x-www-form-urlencoded”、“multipart/form-data”或“text/plain”。对于任何其他标头或值,都会发生预检请求。CORS背后的精神是避免对旧的不支持CORS的浏览器能够进行的任何简单跨域请求进行预检我们提出简单请求的判断标准1)得到,他AD或POST三种请求2)不添加额外的请求头3)POST请求允许三种Content-Type:"application/x-www-form-urlencoded","multipart/form-data"or"text/plain.Non-simplerequests不满足simplerequests的都是非simplerequests.貌似我们平时用的Content-Type:application/json明显是非simplerequestheader.对于非simplerequests,CORS机制会自动触发浏览服务器首先进行preflight(一个OPTIONS请求),请求成功后才发送真正的请求,这里的preflight也可以翻译成(preflight)请求Access-Control-Allow-Headers,如上所说,增加自定义字段后,跨域请求就变成了带preflight的非简单请求,所以会有下面的理解,preflight请求中使用Access-Control-Allow-Headers来标识真正的请求将是Whichheaderfieldsareincluded,也就是下面的自定义header。这种方法是一种服务器端的安全防御。Access-Control-Allow-Credentials这个设置是关于是否支持Cookiesxhr.withCredentials=true;Access-Control-Allow-Credentials:trueYII2中的跨域设置//Access-Control-Allow-Origin:*public$arr_acao=['*'];//访问控制允许方法public$arr_acam=['POST','PUT','GET','DELETE','OPTIONS'];//Access-Control-Allow-Headerspublic$arr_acah=['token','app-key','content-type',];header('Access-Control-Allow-Origin:'.implode(',',$this->arr_acao));header('Access-Control-Allow-Methods:'.implode(',',$this->arr_acam));header('Access-Control-Allow-Headers:'.implode(',',$this->arr_acah));标题(“访问控制最大年龄:86400”);如果($req->isOptions){$code="202";$message="已接受";header("HTTP/1.1".$code."".$message);出口();}通过Access-Control-Allow-Headers设置自定义定义字段的方法是一种安全策略。服务端要求请求头必须携带'token'、'app-key'、'content-type'三个属性字段,缺一不可,否则无法完成请求来源'http://xx.cn'已被CORS策略阻止:预检响应中的Access-Control-Allow-Headers不允许请求标头字段时间戳。Nginx中的跨域定位~*\.(eot|ttf|woff|woff2|svg)${add_headerAccess-Control-Allow-Origin*;add_headerAccess-Control-Allow-HeadersX-Requested-With;add_headerAccess-Control-Allow-MethodsGET,POST,OPTIONS;}以上设置前提是Nginix在模块中启用了其他CORS配置ngx_http_headers_moduleNginx##为nginx开启CORS配置#location/{if($request_method='OPTIONS'){add_header'Access-Control-Allow-Origin''*';add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS';##自定义标头和标头各种浏览器*应该*工作,但不要,内容类型,范围';##有效#add_header'Access-Control-Max-Age'22000;add_header'Content-Type''文本/纯文本;字符集=utf-8';add_header'内容长度'0;返回204;}if($request_method='POST'){add_header'Access-Control-Allow-Origin''*';add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS';add_header'Access-Control-Allow-Headers''DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header'Access-Control-Expose-Headers''Content-Length,Content-Range';}if($request_method='GET'){add_header'Access-Control-Allow-Origin''*';add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS';add_header'Access-Control-Allow-Headers''DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header'Access-Control-Expose-Headers''Content-Length,Content-Range';}Nginx是跨域的,应用与web服务器之间存在耦合,增加了应用部署和扩展的复杂度。根据需要使用CROS。总结一下本文的主要介绍涵盖了CROS的基本分类和常见实现方案,同源策略、XMLHttpRequest请求等基础知识没有过多涉及。简单请求和非简单请求的分类是重点。理解了这一点,就可以理解浏览器在哪些场景下会发起预检请求并回复相应的响应。我们常说的跨域设置是客户端和服务端相互配合的结果。官方协议往往让开发者对跨域没有意识,浏览器与后端服务的交互和互信才是核心。我想为我的服务器添加CORS支持使用CORS
