uni-app(vue)在thinkphp下的跨域问题解决方案

我想我是人

于 2021-05-22 21:34:23 发布

阅读量719

点赞数

分类专栏： Web编程文章标签： uni-app thinkphp 跨域

本文链接：https://blog.youkuaiyun.com/redeg/article/details/117171956

版权

Web编程专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何在uni-app前端和thinkphp5.0后端实现跨域请求。前端通过设置Content-Type为'application/x-www-form-urlencoded'发起POST请求，后端在入口文件index.php中配置允许跨域的头部信息，包括允许的来源、请求方式等。需要注意的是，实际项目中应限制跨域源以提高安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最简单的一种，后端和前端分别做处理。

前端（即uni-app或者基于vue的H5）：在请求中将Content-Type设置为'application/x-www-form-urlencoded，Uni-app如下（Content-Type注意大小写）：

uni.request({
           url:abc.cn,
           method:'POST',
           header: {'Content-Type': 'application/x-www-form-urlencoded'},
           data:params,
           success:function(res) {
// do something
           }
})

后端（基于thinkphp 5.0）：在根目录的public目录下，在index.php入口文件里加入：

// [ 应用入口文件 ]
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET,POST');

// 定义应用目录
define('APP_PATH', __DIR__ . '/../application/');
// 加载框架引导文件
require __DIR__ . '/../thinkphp/start.php';

注意：header('Access-Control-Allow-Origin: *')里的*为通配符，代表允许所有域名跨域调用，安全性很低。实际项目请根据访问地址允许有限域名访问，如：

header('Access-Control-Allow-Origin: http://xyz.com');