开头不多说，先上代码示例，想了解下的，可以接着往后看，注意以下两个是有差别的。
// 允许任意的origin以任意的请求方式获取资源
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: content-type');
header('Access-Control-Allow-Methods: *');
// 允许指定的$origin,以下面三种方式获取资源（可附带身份凭证的请求）
header("Access-Control-Allow-Origin: $origin");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: content-type');
header('Access-Control-Allow-Methods: GET,POST,OPTIONS');
使用以上两种方式基本可以解决大家所遇到的跨域问题，那么可能会有人有疑问了，在header中的这些分别代表什么意思呢？他们分别都起到什么作用？还有就是“可附带身份凭证”的做什么用呢？
- 1.为什么以及什么时候会产生跨域问题
当一个请求与所要请求的资源所在的服务器不在同一个域，或者不在同一个端口的时候，资源会产生一个跨域的Http请求
为什么会有跨域呢？实际上简单的说就是一切为了安全，例如XMLHttpRequest 和 Fetch API 遵循同源策略。如果不遵循此策略的存在的话，最容易产生的便是CSRF攻击（跨站请求伪造），攻击者盗用了你的身份，以你的名义发送恶意请求。
- 2.上述使用到的头的含义以及作用
Origin 指示了请求来自于哪个站点(仅指示服务器名称，并不包含任何路径信息)
Access-Control-Allow-Origin 响应头指定了该响应的资源是否被允许与给定的origin共享。
Access-Control-Allow-Headers 用于预检请求中，列出了将会在正式请求的 Access-Control-Expose-Headers 字段中出现的首部信息。简单首部，如Accept、Content-Language、Content-Type等
Access-Control-Allow-Methods 响应标头指定响应访问所述资源到时允许的一种或多种方法预检请求
Access-Control-Allow-Credentials响应报头指示的请求的响应是否可以暴露于该页面。当true值返回时它可以被暴露。（凭证是 Cookie ，授权标头或 TLS 客户端证书。）
特别说明一下，我们尤其需要注意的是 Access-Control-Allow-Credentials，如果不为true的时候，请求是无法携带cookie等身份凭证信息的！并且当其为true的时候，Access-Control-Allow-Origin是必须要指定的。
- HTTP访问控制（CORS）
跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST请求），浏览器必须首先使用 OPTIONS方法发起一个预检请求，从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据），如下图。（实际场景举例：当前较为流行的vue等，前端框架，在请求的时候会预先发出个options请求，再发送实际请求，就是来源于此，有兴趣的同学可以去了解下）
图一
- 4.跨域附带身份凭证的请求
CORS 的一个有趣的特性是，可以基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言，对于跨域的AJAX请求，浏览器不会发送身份凭证信息。如果要发送凭证信息，需要设置的话，就需要如上文所述将 Access-Control-Allow-Credentials 设置为true，并指定对应Origin。
另外对于响应而言，响应首部中也携带了 Set-Cookie 字段，尝试对 Cookie 进行修改也需要如此。如果操作失败，将会抛出异常
推荐参考文章，希望你能有所收获：
https://cloud.tencent.com/developer/section/1189894
https://developer.mozilla.org/zh-CN/docs/Web/HTTP
网友评论