uniapp请求后台提示allow-origin' header in the response must如何解决

在uniapp中请求后台接口时，遇到报错提示"allow-origin’ header in the response must"，请问这是什么原因导致的？该如何解决这个问题？我的后台是用PHP开发的，是不是需要在服务器端设置跨域头？具体应该怎么配置？

2 回复

在后台服务器配置中，添加跨域响应头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Headers: Content-Type

如果是本地开发，可在manifest.json中配置代理。


这个问题是由于跨域请求被浏览器拦截导致的。解决方法如下：

解决方案

1. 后端配置 CORS（推荐）

在服务器端添加允许跨域的响应头：

Node.js Express 示例：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  next();
});

PHP 示例：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

2. 开发环境临时解决方案

在 manifest.json 中配置：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://your-backend-domain.com",
          "changeOrigin": true,
          "secure": false
        }
      }
    }
  }
}

3. 生产环境解决方案

  • 前后端部署在同一个域名下
  • 使用 Nginx 反向代理
  • 后端正确配置 CORS 策略

4. uni-app 请求代码示例

uni.request({
  url: 'https://your-api.com/api/data',
  method: 'GET',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error('请求失败', err);
  }
});

总结： 最佳解决方案是让后端正确配置 CORS 响应头，开发阶段可使用代理，生产环境确保域名一致或配置好跨域策略。

回到顶部