ThinkPHP跨域问题解决：CORS配置与JSONP讲座

大家好！今天我们要来聊一聊一个让前端和后端程序员都头疼的问题——跨域。如果你曾经在开发过程中遇到过“Access-Control-Allow-Origin”这个错误提示，那么恭喜你，你已经成功进入了跨域的“地狱模式”。不过别担心，今天我们就要用轻松诙谐的方式，带你彻底搞定这个问题！

什么是跨域？

首先，我们得搞清楚什么叫“跨域”。简单来说，跨域是指浏览器出于安全考虑，限制了一个页面从不同的域名、协议或端口请求资源的行为。举个例子：

如果你的前端页面是 http://example.com，而后端接口是 http://api.example.com，这就是跨域。
如果前端页面是 https://example.com，而后端接口是 http://example.com，这也是跨域（因为协议不同）。

浏览器会直接阻止这些请求，并抛出类似这样的错误：

Access to XMLHttpRequest at 'http://api.example.com/data' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

听起来很吓人对吧？但别慌，接下来我们就用两种方法来解决它：CORS 和 JSONP。

方法一：CORS 配置

1. 什么是 CORS？

CORS 是 Cross-Origin Resource Sharing 的缩写，翻译过来就是“跨域资源共享”。它的核心思想是通过服务器设置一些特殊的 HTTP 头部信息，告诉浏览器哪些请求是可以跨域的。

2. 如何在 ThinkPHP 中配置 CORS？

在 ThinkPHP 中，我们可以通过中间件来实现 CORS 配置。下面是一个简单的步骤：

（1）创建中间件

在 application/middleware/Cors.php 文件中，添加以下代码：

namespace appmiddleware;

class Cors
{
    public function handle($request, Closure $next)
    {
        // 设置允许的HTTP方法
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

        // 设置允许的请求头
        header('Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With');

        // 设置允许的来源
        header('Access-Control-Allow-Origin: *'); // 允许所有来源

        // 设置是否允许携带凭证（如 Cookie）
        header('Access-Control-Allow-Credentials: true');

        // 如果是预检请求，直接返回
        if ($request->isOptions()) {
            return response('', 200);
        }

        return $next($request);
    }
}

（2）注册中间件

在 application/middleware.php 文件中，注册刚才创建的中间件：

return [
    appmiddlewareCors::class,
];

（3）测试 CORS

现在，你可以用 Postman 或者浏览器测试一下你的接口。如果一切正常，你应该不会再看到跨域错误了！

3. 注意事项

*不要滥用 `**：虽然Access-Control-Allow-Origin: 看起来很方便，但它意味着任何人都可以访问你的接口。如果你只希望特定的域名访问你的接口，可以用具体的域名代替，例如：http://example.com`。
预检请求：对于某些复杂请求（如自定义头部或非简单方法），浏览器会先发送一个 OPTIONS 请求（称为预检请求）。我们需要确保服务器能正确响应这些请求。

方法二：JSONP

1. 什么是 JSONP？

JSONP 是 JSON with Padding 的缩写，是一种绕过浏览器同源策略的古老技术。它的原理很简单：通过 <script> 标签加载跨域资源，因为浏览器允许 <script> 标签跨域加载。

2. 如何在 ThinkPHP 中实现 JSONP？

（1）修改控制器

假设我们有一个 UserController，需要支持 JSONP 请求。可以在控制器中添加以下代码：

namespace appcontroller;

use thinkController;

class User extends Controller
{
    public function index()
    {
        $callback = input('callback'); // 获取回调函数名
        $data = ['name' => 'ThinkPHP', 'version' => '6.0'];

        // 如果有回调函数名，则返回 JSONP 格式
        if ($callback) {
            return $callback . '(' . json_encode($data) . ');';
        } else {
            return json($data); // 普通 JSON 格式
        }
    }
}

（2）前端调用

在前端，你可以这样调用 JSONP 接口：

function handleResponse(data) {
    console.log(data); // 输出 { name: "ThinkPHP", version: "6.0" }
}

// 创建 script 标签
var script = document.createElement('script');
script.src = 'http://api.example.com/user?callback=handleResponse';
document.body.appendChild(script);

3. JSONP 的优缺点

优点	缺点
支持所有浏览器	只能发送 GET 请求
实现简单	安全性较差（容易被 XSS 攻击）
不需要服务器额外配置	数据格式固定为 JSON

总结

好了，今天的课程就到这里啦！我们学习了两种解决跨域问题的方法：CORS 和 JSONP。CORS 更现代化、功能更强大，但需要服务器配合；而 JSONP 则简单粗暴，但适用场景有限。

最后，引用一段来自 MDN Web Docs 的话：

“CORS is a W3C standard that allows a server to relax the same-origin policy.”

希望大家以后再遇到跨域问题时，都能从容应对！如果有任何疑问，欢迎在评论区留言哦~

下课！