前端跨域方法之CORS_cors 写法-程序员宅基地

技术标签： javascript

1、cross-domain

CORS:是需要浏览器和服务器同时支持，IE浏览器不能低于IE10。整个跨域过程不需要用户的参与，从表面上看，CORS与ajax没有区别，代码相同，但是一旦浏览器发现跨域，它会自动在HTTP头部中添加附加信息（例如domain）,关键在于服务器是否实现了CORS接口。

CORS请求分为简单请求和非简单请求。

只要满足上面的两大条件就是简单请求，否则就是非简单请求。

一、简单请求的基本流程

对于简单请求，浏览器会直接发起跨域请求，会自动在HTTP头部加入Origin字段，如下：

跨域请求的服务器会根据这个Origin进行判断是否同意该域名的跨域请求。

如果服务器不同意，服务器会回应一个HTTP（状态为200），浏览器会在返回的HTTP头部检查Access-Control-Allow-Origin字段，如果没有该字段，就会自动报错。

如果服务器同意，浏览器的HTTP头部字段可能会多出以下字段：

Access-Control-Allow-Origin

Access-Control-Allow-Credentials

Access-Control-Expose-Header

（一）、字段解释，上述的三个头部字段都是在服务器设置:

Access-Control-Allow-Origin: 必写，请求域的domin或者（*） ,*代表着允许所有域名的跨域请求，

Access-Control-Allow-Credentials: 可写，该值是一个布尔值，表示是否允许发送Cookie,默认情况下，Cookie不包括CORS请求中。

Access-Control-Expose-Header： 在CORS请求时浏览器的XMLHttpRequest对象的getResponseHeader()方法只可以拿到六个基本字段，如果还想拿到其他字段就必须在Access-Control-Expose-Header中指定。

（二）、发送Cookie

前面我们说过，默认情况下，CORS是不发送Cookie的。但是Cookie的设置是下需要浏览器和服务器通共设置的。

服务器需要设置头部字段 Access-Control-Allow-Credentials ： true,

浏览器中开发者需要在Ajax请求中设置xhr.withCredentials = true。

否则即使服务器同意发送Cookie，浏览器也不会发送，或者服务器要求设置Cookie，浏览器也不会设置。

重点（敲黑板）：如果要发送Cookie,Access-Control-Allow-Origin就不能设置为*,必须指定明确与请求网页一样的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

二、非简单请求

当发出的的请求为非简单的请求时，比如请求方法是PUT或者DELETE,或者Content-Type字段是application/json。此时浏览器会进行一次预检。

简述：在非简单请求的CORS中，在正式进行通信前，浏览器会增加HTTP请求，称为预检。

预检内容：浏览器会向服务器询问，当前网页的域名是否在许可名单中，以及可以使用哪些字段、哪些方法，只有得到肯定的回复，浏览器才可以进行Ajax通信，否则报错。

（一）浏览器设置预检字段：

Access-Control-Request-Method:必写，用来列出浏览器CORS请求可以使用的HTTP方法

Access-Control-Request-Headers：用来指定浏览器可额外发送的请求头 

（二）服务器通过预检后比简单请求多出的返回字段

Access-Control-Allow-Methods: 必须设置，表明服务器支持的跨域方法，值为逗号隔开的字符串

Access-Control-Allow-Headers: 如果浏览器设置了Access-Control-Request-Headers，那么此字段也必须设置，值为逗号隔开的字符串

Access-Control-Max-Age: 该字段可选，用来指定本次预检请求的有效期，单位为秒

本文链接：https://blog.csdn.net/WEB_YH/article/details/79364593

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

瑞芯微RK3288、RK3399、RK3568、RK3368芯片性能介绍与对比分析_rk3288和rk3568对比-程序员宅基地

文章浏览阅读2.1k次，点赞7次，收藏8次。是瑞芯微推出的一款低功耗、高性能的应用处理器芯片，该芯片基于Big.Little架构,即具有独立的NEON协同处理器的双核Cortex-A72及四核Cortex-A53组合架构，主要应用于计算机、个人互联网移动设备、VR、广告机等智能终端设备。RK3399内置多个高性能硬件处理引擎，能够支持多重格式的视频解码，如：4K*2K@60fps 的H.264/H.265/VP9，也支持1080P@30fps的H.264/MVC/VP8 以及高质量的JPEG编解码和图像的前后处理器。_rk3288和rk3568对比

使用esp 8266物联网开发板 + Mqtt制作远程控制LED小灯_esp8266 mqtt 控制灯亮灭-程序员宅基地

文章浏览阅读1.5k次。如何30快钱以内制作一个手机控制的led小灯_esp8266 mqtt 控制灯亮灭

Ansys Zemax | 如何模拟光学相干层析成像系统_nsdd操作数-程序员宅基地

文章浏览阅读291次，点赞2次，收藏4次。聚焦透镜的坐标(0，20，40)，使聚焦透镜与扫描镜保持水平，并保持20mm的距离(该距离在两者的水平位置距离中是任意的)，聚焦透镜的材料为N-BK7。_nsdd操作数

流式处理中的文本聚类：探索Apache Beam在文本数据处理中的应用-程序员宅基地

文章浏览阅读5.7k次。作者：禅与计算机程序设计艺术流式处理中的文本聚类：探索Apache Beam在文本数据处理中的应用引言1.1. 背景介绍随着互联网与物联网的发展，大量的文本数据在各个领

基于微服务架构的分布式系统：如何设计和实现高效的微服务系统_基于微服务的系统-程序员宅基地

文章浏览阅读4.7k次。随着互联网的发展，分布式系统在大型企业应用中越来越普遍。微服务架构作为一种新兴的分布式系统架构，以其灵活性和可扩展性吸引了越来越多的开发者。在微服务架构中，每个服务都是独立的，具有完整的功能和数据职责。本文旨在探讨如何设计和实现高效的微服务系统，以应对现代应用中日益增长的需求。服务注册和发现：服务注册表和反向代理服务。服务路由：服务发现和路由器。服务安全：访问控制、加密和认证。分布式事务：分布式事务工具，如乐观锁。消息队列：异步处理和消息传递。_基于微服务的系统

全网最有效解决centos7 安装MySQL报错No package mysql-server available_no package mod_auth_mysql available.-程序员宅基地

文章浏览阅读856次。今天想在centos7上面装一个mysql，但是无论我yum就还是wget都装不上，提示No package mysql-server…,然后又度娘又各种查资料，试了好多种方法都没有用，最后了解Centos7系统后发现，Centos7带有MariaDB而不是MySQL，MariaDB和MySQL一样也是开元的数据库，同样可以使用yum命令安装，只不过安装使用的并不是老方式的MySQL，而是默认的MariaDB，并且还需要安装的是mariadb-server，如果想继续使用老方式的MySQL，那么需要清_no package mod_auth_mysql available.