uniapp中接口请求头自定义字段报错is not allowed by access-control-allow-headers如何解决

在uniapp开发中，我自定义了接口请求头字段，但请求时报错"xxx is not allowed by Access-Control-Allow-Headers"。请问如何解决这个跨域请求头被拦截的问题？需要配置服务端还是客户端？具体应该怎么操作？

2 回复

在后端配置CORS，允许自定义请求头字段。例如在Nginx中添加：

add_header 'Access-Control-Allow-Headers' '自定义字段名';

或Node.js中使用cors中间件配置allowedHeaders。


在UniApp中遇到"is not allowed by Access-Control-Allow-Headers"错误，这是浏览器的CORS（跨域资源共享）策略导致的。以下是解决方案：

解决方案

1. 服务端配置（推荐）

让后端在响应头中添加自定义字段到Access-Control-Allow-Headers：

// Node.js Express示例
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Your-Custom-Header');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  next();
});

2. 客户端处理

在UniApp请求中避免不必要的自定义头，或使用标准头：

// UniApp请求示例
uni.request({
  url: 'https://api.example.com/data',
  method: 'POST',
  header: {
    'Content-Type': 'application/json',
    // 避免使用服务端未允许的自定义头
    // 'Custom-Header': 'value' // 可能导致错误
  },
  data: {
    key: 'value'
  },
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

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

  • 使用浏览器插件禁用CORS（仅开发环境）
  • 配置本地代理（HBuilderX内置浏览器支持）

4. 生产环境

  • 确保前后端域名一致，避免跨域
  • 使用Nginx反向代理配置CORS

注意事项

  • 自定义请求头会触发预检请求（OPTIONS）
  • 确保服务端正确响应预检请求
  • 在生产环境中，应严格配置允许的域名和头部

最根本的解决方案是让后端正确配置CORS策略，允许你使用的自定义请求头字段。

回到顶部