Gitlab Pages下Angular项目JSON翻译文件CORS错误及302重定向问题

问题背景 #

我的Angular项目通过src/assets/i18n下的JSON文件实现多语言翻译，部署到GitLab Pages后出现以下错误：

从源站'https://lorenzoname.gitlab.io'访问被重定向至'https://gitlab.com/oauth/authorize?xxx'的XMLHttpRequest请求，被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'头。

同时伴随302状态码提示：

状态码：302 => 因请求被重定向，无可用内容。

后续触发两次重定向请求：

请求URL：https://projects.gitlab.io/auth?domain=https://lorenzoname.gitlab.io&state=xxx
请求方法：GET
状态码：302
引用策略：strict-origin-when-cross-origin

请求URL：https://gitlab.com/oauth/authorize?client_id=xxx&redirect_uri=https://projects.gitlab.io/auth&response_type=code&state=xxx&scope=api
请求方法：GET
状态码：302
引用策略：strict-origin-when-cross-origin

GitLab CI任务输出：

问题根源 #

这一系列错误的核心是：翻译文件的请求未命中GitLab Pages上的静态资源，而是被强制重定向到GitLab的OAuth认证流程。通常由项目权限设置为私有、Angular资源配置错误、GitLab CI构建路径不匹配导致。

解决步骤 #

1. 调整GitLab Pages访问权限 #

• 进入项目「Settings」→「Pages」页面
• 在「Access control」区域，将权限设置为Public
• 私有项目的GitLab Pages会要求用户登录，未授权的静态资源请求会被重定向到OAuth页面，这是触发CORS错误的直接原因

2. 验证Angular资源配置 #

确保angular.json中assets配置包含src/assets，保证构建时i18n文件被复制到产物目录：

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      // 其他构建配置
    }
  }
}

3. 修正i18n文件加载路径 #

加载多语言文件时使用相对路径，避免绝对路径拼写错误：

// 正确示例
this.http.get('./assets/i18n/en.json').subscribe(...);

4. 检查GitLab CI部署配置 #

确保构建产物输出到GitLab Pages要求的public目录，示例gitlab-ci.yml配置：

pages:
  stage: deploy
  image: node:18-alpine
  script:
    - npm install
    - ng build --configuration production --output-path public
  artifacts:
    paths:
      - public
  only:
    - main

如果你的构建命令输出目录不是public，必须调整为该目录，否则GitLab Pages无法找到静态资源，会返回404并触发重定向。

5. 本地验证构建产物 #

执行本地构建命令ng build --configuration production，检查产物目录（默认dist）下是否存在assets/i18n文件夹及对应的JSON文件，确认文件未丢失。

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