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

最新推荐文章于 2024-07-31 15:48:56 发布

江子星

最新推荐文章于 2024-07-31 15:48:56 发布

阅读量438

点赞数

文章标签： cors跨域+php配置

介绍

通过代码演示前端与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"}

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