个人中心
gpt4 book ai didi

gitlab - 故事书 Gitlab 页面 : script importing from wrong URL resulting in CORS errors

转载 作者：行者123 更新时间：2023-12-05 05:34:00 26 4
gpt4 key购买 nike

当我将更新推送到任何分支时，我正在尝试使用 Gitlab CI 构建和托管故事书页面。这是当前的 CI 脚本:

CI 脚本

image: node:16

stages:
  - setup
  - build-and-test
  - deployment
  - pages

# stage: setup

setup:
  stage: setup
  cache:
    key: ${CI_COMMIT_REF_SLUG}
    paths:
      - node_modules/
  artifacts:
    paths:
      - node_modules/
  script:
    - yarn

# stage: build-and-test (here I run linter, unit tests, and everything I want to build or test)

build:
  stage: build-and-test
  artifacts:
    paths:
      - dist/
  script:
    - yarn build

storybook:
  stage: build-and-test
  artifacts:
    expire_in: 2 weeks
    when: always
    paths:
      - storybook/
  script:
    - yarn build-storybook --output-dir storybook

# stage: deployment (here I deploy my app to specific stages or other artefacts like storybook)

deploy-storybook:
  stage: deployment
  script:
    - echo "Enjoy the day. 🥳 Every job needs a script, but this job was just created to configure an environment."
  environment:
    name: storybook/$CI_COMMIT_REF_SLUG
    url: https://<my_username>.gitlab.io/<my_project>/$CI_COMMIT_REF_SLUG/storybook/
    on_stop: remove-storybook
  only:
    - branches

remove-storybook:
  stage: deployment
  cache:
    key: 'my-storybook'
    paths:
      - public
  script:
    - rm -rf "public/$CI_COMMIT_REF_SLUG/storybook"
  when: manual
  variables:
    GIT_STRATEGY: none # needed to prevent "Couldn't find remote ref" error
  environment:
    name: storybook/$CI_COMMIT_REF_SLUG
    action: stop

# stage: pages (the stage name is custom, but the job NEEDS to be named pages)

pages:
  stage: pages
  cache:
    key: 'my-storybook'
    paths:
      - public
  script:
    - if [ "$CI_COMMIT_REF_NAME" = "main" ]; then
      mkdir -p public;
      touch public/index.html;
      echo "<!DOCTYPE HTML><script>window.location.href = 'https://<my_username>.gitlab.io/<my_project>/main/storybook'</script>" > public/index.html;
      fi;
    - rm -rf "public/$CI_COMMIT_REF_SLUG"
    - mkdir -p "public/$CI_COMMIT_REF_SLUG";
    - mv storybook "public/$CI_COMMIT_REF_SLUG"
  artifacts:
    paths:
      - public

这按预期编译但在查看时在控制台中有错误:

iframe.html:1 Access to script at 'https://gitlab.com/oauth/authorize?client_id=<my_client_id>&redirect_uri=https://projects.gitlab.io/auth&response_type=code&state=AFyDa1QTpsd9qXqSzdoy4w==&scope=api' (redirected from 'https://<my_username>.gitlab.io/assets/iframe.8696a5de.js') from origin 'https://<my_username>.gitlab.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
iframe.html:374          GET https://gitlab.com/oauth/authorize?client_id=<my_client_id>&redirect_uri=https://projects.gitlab.io/auth&response_type=code&state=AFyDa1QTpsd9qXqSzdoy4w==&scope=api net::ERR_FAILED 302

https://<my_username>.gitlab.io/<project_name>/<branch>/storybook/assets/iframe.html相关栏目:

<head>
  ...
  <script defer src="/node_modules/@fortawesome/fontawesome-free/js/all.min.js"></script>

  <!-- iframe.html:374 -->
  <script type="module" crossorigin src="/assets/iframe.8696a5de.js"></script>

  <link rel="stylesheet" href="/assets/iframe.0f83afa4.css">
  ...
</head>

.storybook/main.cjs 

const { resolve } = require("path");
const { typescript: preprocessTS } = require("svelte-preprocess");
const { loadConfigFromFile, mergeConfig } = require("vite");

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-svelte-csf"
  ],
  "framework": "@storybook/svelte",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "svelteOptions": {
    "preprocess": import("../svelte.config.js").preprocess
  },
  svelteOptions: {
    preprocess: [
      preprocessTS(),
    ],
  },
  async viteFinal(config, { configType }) {
    const { config: userConfig } = await loadConfigFromFile(
      resolve(__dirname, "../vite.config.ts")
    );

    return mergeConfig(config, {
      ...userConfig,
      // manually specify plugins to avoid conflict
      plugins: []
    });
  }
}

问题

如何修复此脚本导入错误？我认为脚本标签中生成的 url 是错误的，应该类似于 https://<my_username>.gitlab.io/<project_name>/<branch>/storybook/assets/iframe.8696a5de.js (而不是当前的 https://<my_username>.gitlab.io/assets/iframe.8696a5de.js )。有什么方法可以编辑 CI 以编辑根 URL？

如果那行不通，为什么不呢？还有什么可以代替？

最佳答案

我找到了解决方法，但我认为这不是一个合适的解决方案。如果您遇到此问题，以下方法确实有效:

我在 GitLab CI 中使用正则表达式替换来更正 src和 href构建中所有链接的路径 index.html和 iframe.html文件。我使用的确切代码如下:

- sed -i -E "s/((src|href)=\")\/?/\1.\//g" public/$CI_COMMIT_REF_SLUG/storybook/index.html
- sed -i -E "s/((src|href)=\")\/?/\1.\//g" public/$CI_COMMIT_REF_SLUG/storybook/iframe.html

此更改是必要的，原因有两个:

  • 托管的页面包括存储库名称(例如，<user>.gitlab.io/<repo>/)。此页面中以斜杠开头的任何链接都将在 <user>.gitlab.io/ 搜索其资源资源不会在那里，但系统永远不会走那么远(见下文)。
  • Gitlab 要求对任何非相对资源路径进行身份验证，因此资源将被阻止。

正则表达式替换通过替换写为 path/name.ext 的任何资源解决了这些问题或 /path/name.ext与 ./path/name.ext这在我的案例中是有效的，并且有望为任何需要它的人工作。

关于gitlab - 故事书 Gitlab 页面 : script importing from wrong URL resulting in CORS errors，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73703303/

26 4 0
文章推荐： amazon-web-services - NEXTJS 放大缓慢的服务器响应
文章推荐： python - PyPDF2 错误 "PyCryptodome is required for AES algorithm"
文章推荐： javascript - 如何在 2022 年秋季在 Firefox Nightly 中试用 webGPU？
文章推荐： elasticsearch - 如何在 Elasticsearch 中针对唯一 ID 保存状态或状态转换
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com