言午月月鸟 - PHP与前端CORS交互示例

#### 介绍

通过代码演示 前端与[PHP](https://www.oschina.net/p/php "PHP")下的 CORS 相关使用和设置。

代码库： https://gitee.com/dingusxp/demo-cors

目录结构：
```
run.sh               运行 server（直接使用 php -S 启动）
client/index.php     客户端 页面
server/index.php     服务端 接口
```

#### 运行

linux 环境 + [PHP](https://www.oschina.net/p/php "PHP")7.x（windows 环境可以使用 git bash 运行）

```
# 准备：打开 run.sh 并根据实际设置 php 路径； 然后直接运行 即可
sh run.sh
```

然后浏览器打开 [http://127.0.0.1:8555](http://127.0.0.1:8555)  即可； 如有需要可自行编辑代码，刷新页面测试效果。

---------- 分割线 ----------

如果你~~不嫌麻烦~~有现成环境，也可以使用 nginx 配置两个 vhost 分别指向 client、server 目录。

并对应修改代码：
```
# client/index.php 
# 修改对应行 服务端地址
const domain = 'http://127.0.0.1:8666';

# server/index.php
# 修改对应行 允许的的客户端origin
static $allowOrigins = ['http://127.0.0.1:8555'];
```

#### 解读

基于浏览器的 ```同源策略```，客户端域名和服务端域名不同时，默认是不能进行 XHR/fetch 请求的（常说的跨域问题）。

但在 CORS (Cross-Origin Resource Sharing)，即 ```跨域资源共享``` 机制下，我们可以进行安全的接口跨域请求。

本示例演示几种场景：（参考 运行 章节，打开浏览器自行测试 ↑ ）

**1. 直接访问 Test Direct && Test Forbidden**

客户端、服务端 都不做任何特殊处理。

```
客户端： 请求发出，服务端返回后，客户端会提示请求失败（blocked by CORS policy）。
服务端： 正常收到客户端发送的 GET、POST 数据（无 COOKIE 数据）并处理和返回。
参考日志：
[2021-01-13 08:05:43] direct request. | (context=>){"id":"i520284-1","action":"forbidden","body":"time=2021/1/13 下午3:05:43","cookie(session-loop)":null}
```

**注意：**  即使是跨域请求，客户端收不到返回数据，但是服务端实际还是会正常执行。可以考虑在服务入口加上检测，当请求来源不在允许域下时，直接返回 403Foridden。

**2. 简单请求 Test Simple**

客户端无特殊处理，服务端返回 Allow-Origin 等 header 信息。

```
客户端： 请求发出，服务端返回后，客户端正常接收数据。
服务端： 正常收到客户端发送的 GET、POST 数据（无 COOKIE 数据）并处理和返回。
参考日志：
[2021-01-13 08:10:21] simple request. | (context=>){"id":"i520284-2","action":"simple","body":"time=2021/1/13 下午3:10:21","cookie(session-loop)":null}
```

**3. 复杂请求 Test Complex**

客户端请求增加了自定义的 header 头，服务端返回的 Allow-Headers 信息需要设置支持该自定义 header。

```
客户端： 请求发出，服务端返回后，客户端正常接收数据。
服务端： 共收到两次请求。第一次为 OPTIONS 请求，body 内容为空；第二次为 POST 请求，body 包含信息（无 COOKIE 数据）。
参考日志：
[2021-01-13 08:17:34] complex request. | (context=>){"id":"i520284-3","action":"complex","body":"{\"time\":\"2021/1/13 下午3:17:34\"}","cookie(session-loop)":null}
[2021-01-13 08:17:34] complex request. | (context=>){"id":"i520284-3","action":"complex","body":"","cookie(session-loop)":null}
[2021-01-13 08:17:34] METHOD: OPTIONS | (context=>){"id":"i520284-3","action":"complex","body":"","cookie(session-loop)":null}
```

**注意：**  收到第一个请求，即 OPTIONS 请求时，最好在返回对应 header 之后，终止后续业务代码执行！（演示代码默认未终止，故 “complex request” 日志有两条 ↑）

**4. 认证请求 Test Credential**

客户端 fetch 请求设置 credentials=include，服务端返回 Allow-Credentials 等 header 信息。

```
客户端： 请求发出，服务端返回后，客户端正常接收数据（浏览器也设置 cookie 成功）。
服务端： 正常收到客户端发送的 GET、POST、COOKIE 数据 并处理，同时可设置浏览器 cookie。
参考日志：
[2021-01-13 08:22:50] credential request. | (context=>){"id":"i520284-4","action":"credential","body":"time=2021/1/13 下午3:22:50","cookie(session-loop)":"16"}
```

其它场景和参数，可自行调整代码测试。（注释较少，希望代码易懂）

文章参考： 
[https://mp.weixin.qq.com/s/tei4tXhxthnZIX6mLUwSTA](https://mp.weixin.qq.com/s/tei4tXhxthnZIX6mLUwSTA)