tp5 留言板 跨域提交给另一个站点

解决跨域的两种方法:

一:生成中间件

php think make:middleware CrossDomain

tp5给我们提供了这样的中间件生成cli命令你也可以手动去创建目录和CrossDomain类,记住中间件的入口方法必须是handle($request, \Closure $next)。

手动创建:application->http->middleware->CrossDomain.php

在handle中添加OPTIONS请求处理

<?php

/**

 * 请求处理中间件

 */

namespace app\http\middleware;

use think\Response;

class CrossDomain

{

    public function handle($request, \Closure $next)

    {

        header('Access-Control-Allow-Origin: *');

        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-Methods: GET, POST, PATCH, PUT, DELETE');

        header('Access-Control-Max-Age: 1728000');

        if (strtoupper($request->method()) == "OPTIONS") {

            return Response::create()->send();

        }

        return $next($request);

    }

}


需要特别注意的是在我们使用header()设置之后我们 检测请求方法如果是OPTIONS就直接返回一个200响应。这个非常重要,我在看网上其他一些资料说检测是OPTIONS请求直接exit()就行。

但是明确告诉你那样会出错,应为handle必须返回一个Response,所以我们返回一个200状态的响应。

注册中间件

中间件写完必须注册了才可以生效。你可以全局注册或者在模块中注册。

全局注册:在application目录下新建middleware.php

<?php

/**

 * 中间件注册

 */

return [

    \app\http\middleware\CrossDomain::class

];

二:应用初始化时加上header头

1.CORS的概念

    CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求 url 的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

2. 跨域点

当浏览器检查到有跨域的问题,会对访问的接口做一个判断,如果是简单的接口,则直接访问,如果是复杂的接口,则需要先发送一个 option 请求,如果路由里面没有定义该接口的 option 请求,或者返回非200http状态码,就会报一个 404 错误。

3. 解决方案

header('Access-Control-Allow-Origin: *');

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

header('Access-Control-Allow-Methods: GET,POST');

 一般浏览器在检查到跨域问题时,会有两次请求,第一次是 option,如果返回 200,然后才会正式去访问接口。所以需要在有跨域的地方,都加上一个对 option 请求的处理.

对于ThinkPHP5来说,在其 application 目录下,有一个 tags.php 文件,这个能保证加载全局的函数。将 CORS 跨域处理文件的路径定义到 app_init 下,这就能保证,tp5 框架在初始化就加载这个跨域处理函数。  

在 application->tags.php 文件中添加如下代码:

// 应用初始化

'app_init'     => [

  'app\\api\\behavior\\CORS'

],


新建文件 application->api->behavior->CORS.php

<?php

namespace app\api\behavior;

use think\Response;

class CORS

{

    public function appInit(&$params)

    {

        header('Access-Control-Allow-Origin: *');

        header("Access-Control-Allow-Headers: token,Origin, X-Requested-With, Content-Type, Accept");

        header('Access-Control-Allow-Methods: POST,GET');

        if (request()->isOptions()) {

            exit();

        }

    }

}

自己实际操作时,用一种方法,留言提交到后台了,但是前端返回error,还是提示跨域,用了第二种方法完美解决。

(86)
上一篇 2024-01-29
下一篇 2024-01-31