Nuxt.js连接Heroku部署的Strapi API时出现401未授权错误求助

DevOps 小满

2026-5-19

解决Nuxt本地访问Heroku部署的Strapi API出现401 Unauthorized问题

刚上手Nuxt和Strapi就碰到这个权限问题，确实挺闹心的，我帮你梳理几个最关键的排查方向：

确认Strapi的公共角色权限配置
首先登录你部署在Heroku上的Strapi后台，找到你要请求的数据集合（比如你请求的是/api/posts，就去Content-Types Builder里找到Posts集合），进入Permissions页面，给Public角色勾选对应的权限（比如find和findOne）。
划重点：修改权限后一定要重启Heroku上的Strapi实例（可以在Heroku控制台重启dyno），因为Strapi的权限修改有时候不会即时生效，尤其是部署在云平台上的时候。
检查请求URL与认证配置
- 先确认Nuxt里配置的API base URL是否正确，Strapi v4版本默认会带/api前缀，所以你的base URL应该是https://your-strapi-app-name.herokuapp.com/api，别漏了这个前缀。
- 如果你的Strapi API开启了令牌认证（不是默认的公共权限），那Nuxt请求时必须带上正确的API令牌。可以在Nuxt的nuxt.config.js里配置axios的请求头：
```
export default {
  axios: {
    baseURL: 'https://your-strapi-app-name.herokuapp.com/api',
    headers: {
      common: {
        Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`
      }
    }
  }
}
```
  这个STRAPI_API_TOKEN需要在Strapi后台生成（路径：Settings -> API Tokens），然后把它加到Nuxt的环境变量里（本地用.env文件，部署时对应平台设置环境变量）。
调整Strapi的CORS配置
Strapi默认的CORS规则可能只允许本地请求，部署到Heroku后需要修改配置允许Nuxt的本地地址访问。找到Strapi项目里的config/middlewares.js，修改cors中间件的配置：
```
module.exports = [
  // 其他中间件...
  {
    name: 'strapi::cors',
    config: {
      origin: ['http://localhost:3000'], // 这里填你的Nuxt本地运行地址
      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
      credentials: true,
    },
  },
];
```
修改完后记得把代码重新push到Heroku仓库，让配置生效。
查看完整错误信息定位问题
你看到的错误是"Invalid ..."，可以打开浏览器开发者工具的Network面板，查看这个GET请求的Response详情，里面会有更具体的错误描述（比如Invalid token、Missing token或者Insufficient permissions），能帮你快速锁定问题。
另外也可以在Heroku控制台执行heroku logs --tail，实时查看Strapi的运行日志，里面会输出权限相关的详细错误信息。
直接测试API接口
用Postman或者浏览器直接访问你的Strapi API地址（比如https://your-strapi-app-name.herokuapp.com/api/posts），如果直接访问也返回401，那问题肯定出在Strapi的权限或配置上；如果直接访问能拿到数据，那就是Nuxt的请求配置有问题，再回头检查请求头或URL。

内容的提问来源于stack exchange，提问作者Jay