一键配置ThinkPHP跨域，小程序和网页请求so easy！

前端

2023-12-17 20:19:15

跨域请求全解析：ThinkPHP、小程序、网页三管齐下

在当今互联互通的时代，跨域请求已成为网络开发中不可或缺的一环。本文将深入探究跨域请求的本质，并分别讲解如何在 ThinkPHP 中配置跨域、小程序如何进行跨域请求，以及网页如何实现跨域请求。

什么是跨域请求？

跨域请求是指从一个源（例如一个网站）向另一个源（例如另一个网站或 API）发送 HTTP 请求。如果两个源不在同一域名、协议或端口上，则会产生跨域请求。

为什么需要跨域配置？

默认情况下，浏览器会阻止跨域请求，以保护用户安全和隐私。例如，您的网站不允许向其他网站发送请求，修改其内容或读取其敏感信息。

ThinkPHP 中的跨域配置

ThinkPHP 提供了一个简单的方法来配置跨域访问：

Route::group('/', function() {
    $options = [
        'allow_methods' => 'GET, POST, PUT, DELETE',
        'allow_headers' => 'Content-Type, X-Requested-With, Authorization',
        'allow_credentials' => true,
        'max_age' => 3600,
    ];
    Route::any('/*', function() {
        return 'Hello, World!';
    })->middleware(AllowCrossDomain::class, $options);
});

通过在路由文件中添加此代码，您可以对所有请求启用跨域访问。

小程序中的跨域请求

在微信小程序中，跨域请求可以通过 wx.request 方法发起：

wx.request({
    url: 'https://example.com/api',
    header: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    }
});

请注意，您需要在 header 中设置 Content-Type 和 Access-Control-Allow-Origin。

网页中的跨域请求

在网页中，跨域请求需要与服务端协商设置允许跨域的响应：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, X-Requested-With, Authorization
Access-Control-Max-Age: 3600

这些响应头字段应设置在服务端的 HTTP 响应中。