原创文章，转载请注明：转载自技术哥
微信订阅号：技术哥
技术哥
给你不一样的世界
什么是跨域
什么是跨域请求？
当一个资源向与本身所在服务器不同的域或者端口发起请求时，会发起一个跨域HTTP请求。
为什么有跨域限制？
跨域资源共享（CORS即Cross Origin Resource Sharing）机制允许Web服务器进行跨域访问控制，从而可以安全地进行跨域访问，览器支持在 API 容器中使用 CORS，以降低跨域 HTTP 请求所带来的风险。
CORS分成简单请求和复杂请求
简单请求大致满足以下条件：
使用下列方法之一：
GET
HEAD
POST
HTTP头不超过以下字段：
Accept
Accept-Language
Content-Language
DPR
Downlink
Save-Data
Viewport-Width
Width
其中Content-Type 只能为以下之一：
text/plain
multipart/form-data
application/x-www-form-urlencoded
如不满足以上条件，都可以视为复杂请求。
若服务器不能响应跨域请求，则需要在服务端带上Access-Control-Allow-Origin的响应头，以PHP为例：
header('Access-Control-Allow-Origin:*']);其中“ * ”表示该数据对任何人可见，如果只希望特定的地址访问，可以把*改为对应的地址
复杂请求会先发送一个预请求，该请求以OPTIONS方法发起，预请求会对服务器进行检测，以获取服务器是否允许该请求，预请求可以避免跨域请求对服务器产生的未知影响。
当进行复杂请求时需要对服务端进行设置，以PHP为例：
header
('Access-Control-Allow-Origin: *');
header
('Access-Control-Allow- Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
header
("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");其中Access-Control-Allow-Method表示预请求后所允许的请求方式，Access-Control-Allow-Headers表示预请求后所允许的响应头，如果预请求成功，就可以进行实际请求。
附带身份凭证的跨域请求
一般基于HTTP cookies的验证身份对于跨域 XMLHttpRequest请求来说，浏览器并不会发送对应的身份凭证信息，如果需要带上身份凭证的XMLHttpRequest请求，需要做额外的设置，以PHP为例：
header
('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
header
("Access-Control-Allow-Credentials: true");
header
("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
header
('Access-Control-Allow-Methods:GET,POST, PUT,DELETE,OPTIONS,PATCH');前端则需要将withCredentials设置为true，从而向服务器发送cookies，服务端则需要设置Access-Control-Allow-Credentials:true来把响应内容返回请求者，由于withCredentials：true与Access-Control-Allow-Origin:*不能同时存在，所以需要从$_SERVER（PHP超级全局变量，包含由web服务器创建的信息，它提供了服务器和客户配置及当前请求环境的有关信息。）获取请求域的信息。
本文为我们曾经遇到的问题，现整理成为笔记分享给大家，希望对面对同样问题的朋友有所帮助。
往期回顾
服务器｜9.9元搭建服务器
服务端｜如何实现物联网后台
前端｜VUE环境的搭建
web前端 | vue系列教程(2)
区块链教程–快速入门
小程序凭什么这么火？