当前位置: 首页 > news >正文

thinnkphp5.1和 thinkphp6以及nginx,apache 解决跨域问题

ThinkPHP 5.1

  1. 使用中间件设置响应头
    ThinkPHP 5.1 及以上版本支持中间件,可以通过中间件统一设置跨域响应头。

步骤:
创建一个中间件文件,例如 CorsMiddleware.php:

namespace app\middleware;class CorsMiddleware
{public function handle($request, \Closure $next){$response = $next($request);// 设置跨域响应头$response->header(['Access-Control-Allow-Origin' => '*', // 允许所有域名访问'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS', // 允许的请求方法'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With', // 允许的请求头]);return $response;}
}

在 app/middleware.php 中注册中间件:

return [// 其他中间件\app\middleware\CorsMiddleware::class,
];

如果需要针对特定路由启用跨域,可以在路由中单独应用中间件:

Route::group(function () {// 你的路由
})->middleware(\app\middleware\CorsMiddleware::class);
  1. 在控制器中设置响应头
    如果不需要全局设置跨域,可以在控制器中手动设置响应头。

示例:

namespace app\controller;use think\Response;class Index
{public function index(){// 设置跨域响应头$response = Response::create('Hello, World!', 'json');$response->header(['Access-Control-Allow-Origin' => '*','Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS','Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With',]);return $response;}
}
  1. 处理 OPTIONS 预检请求
    浏览器在发送跨域请求时,会先发送一个 OPTIONS 请求(预检请求),服务器需要正确处理该请求。

示例:
在路由中定义一个 OPTIONS 请求的路由:

Route::options('*', function () {return Response::create()->code(204)->header(['Access-Control-Allow-Origin' => '*','Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS','Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With',]);
});

ThinkPHP 6 的跨域配置

ThinkPHP 6 提供了更简单的跨域配置方式,可以在 config/cors.php 中配置跨域。

步骤:
创建 config/cors.php 文件:

return ['allow_origin' => ['*'], // 允许的域名'allow_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 允许的请求方法'allow_headers' => ['Content-Type', 'Authorization', 'X-Requested-With'], // 允许的请求头'expose_headers' => [], // 暴露的响应头'max_age' => 0, // 预检请求缓存时间'supports_credentials' => false, // 是否允许携带凭证
];

在 app/middleware.php 中启用跨域中间件:

return [// 其他中间件\think\middleware\AllowCrossDomain::class,
];

Nginx设置跨域

如果不想在代码中处理跨域,可以在 Web 服务器(如 Nginx 或 Apache)中配置跨域。

Nginx 配置:

server {location / {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';if ($request_method = 'OPTIONS') {return 204;}}
}

Apache 设置跨域:

<IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
</IfModule>RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=204,L]

总结

中间件:推荐使用中间件统一处理跨域。

控制器:如果仅需局部跨域,可以在控制器中设置响应头。

OPTIONS 请求:确保正确处理预检请求。

服务器配置:可以通过 Nginx 或 Apache 配置跨域。

ThinkPHP 6:提供了更简单的跨域配置方式。

根据项目需求选择合适的方式即可!

http://www.lryc.cn/news/517867.html

相关文章:

  • vue2新增删除
  • 测试ip端口-telnet开启与使用
  • Python爬虫基础——XPath表达式
  • ansible-性能优化
  • 高等数学学习笔记 ☞ 一元函数微分的基础知识
  • 前后端实现防抖节流实现
  • 【笔记】算法记录
  • 【网络云SRE运维开发】2025第2周-每日【2025/01/08】小测-【第8章 STP生成树协议】理论和实操解析
  • git push -f 指定分支
  • CTF知识点总结(二)
  • 解决Edge打开PDF总是没有焦点
  • 69.基于SpringBoot + Vue实现的前后端分离-家乡特色推荐系统(项目 + 论文PPT)
  • 计算机视觉目标检测-DETR网络
  • 《自动驾驶与机器人中的SLAM技术》ch1:自动驾驶
  • 【UE5 C++课程系列笔记】23——多线程基础——AsyncTask
  • 基于Python的音乐播放器 毕业设计-附源码73733
  • cursor vip
  • Docker部署项目,Mysql数据库总是宕机并且上传数据全部被删除了
  • C++ 复习总结记录六
  • spring boot 集成 knife4j
  • WordPress静态缓存插件WP Super Cache与 WP Fastest Cache
  • Pytest钩子函数,测试框架动态切换测试环境
  • VUE3封装一个Hook
  • 【Spring Boot】Spring AOP 快速上手指南:开启面向切面编程新旅程
  • HTML基础入门——简单网页页面
  • INT301 Bio Computation 题型整理
  • 机器学习免费使用的数据集及网站链接
  • 低空经济——飞行汽车运营建模求解问题思路
  • 英伟达Project Digits赋能医疗大模型:创新应用与未来展望
  • 【Python3】异步操作 redis