当前位置: 首页 > 工具软件 > PHP CORS > 使用案例 >

cors跨域+php配置,PHP与前端CORS交互(跨域资源共享)示例

韩善
2023-12-01

介绍

通过代码演示 前端与PHP下的 CORS 相关使用和设置。

目录结构:

run.sh 运行 server(直接使用 php -S 启动)

client/index.php 客户端 页面

server/index.php 服务端 接口

运行

linux 环境 + PHP7.x(windows 环境可以使用 git bash 运行)

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

sh run.sh

然后浏览器打开 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"}

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

 类似资料: