CORS when connecting to self-hosted gitlab

Hello

I’m trying to access a self-hosted gitlab from a site with my own domain.

page is https://ie.u-ryukyu.ac.jp/~k198584/
admin is https://ie.u-ryukyu.ac.jp/~k198584/admin
GitLab is https://gitlab.ie.u-ryukyu.ac.jp/

config.yml is written as follows.

backend:
 name: gitlab
 repo: k198584/anatofuznews
 auth_type: implicit # Required for implicit grant
 app_id: testtest
 api_root: https://gitlab.ie.u-ryukyu.ac.jp/api/v4
 base_url: https://gitlab.ie.u-ryukyu.ac.jp
 auth_endpoint: oauth/authorize
 site_domain: https://ie.u-ryukyu.ac.jp
media_folder: "content/posts"
public_folder: "/static"
site_url: https://ie.u-ryukyu.ac.jp/~k198584/
collections:
  - name: "blog"
    label: "Blog"
    extension: "md"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Digest", name: "digest", widget: "string" }
      - { label: "Category", name: "category", widget: "string" }
      - { label: "Tags", name: "tag", widget: "list" }
      - { label: "GiphyKey", name: "giphy", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Body", name: "body", widget: "markdown" }

Although I set the API normally, when I connect, the following error appears and I can not access due to CORS.

Access to fetch at 'https://gitlab.ie.u-ryukyu.ac.jp/api/v4/projects/k198584%2Fanatofuznews' from origin 'https://ie.u-ryukyu.ac.jp' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
unsentRequest.js:41 GET https://gitlab.ie.u-ryukyu.ac.jp/api/v4/projects/k198584%2Fanatofuznews net::ERR_FAILED

Is there any solution?
(Cloud service cannot be used due to company policy, so I want to manage everything on-premises.)

Hey @AnaTofuZ,
The best fix would be to add the “Access-Control-Allow-Origin” header on the Gitlab side, to enable your origin (https://ie.u-ryukyu.ac.jp) to access it. We don’t know the answer to whether that’s possible but Gitlab support should!

If it turns out to not be possible to add that header, I’d suggest reviewing this article about proxying your requests through a Netlify Function:

Here is the function you’ll call from your page:

Let us know if this helps or if you have additional questions!

2 Likes

Thank you @jen for your comment.

I’m trying to add a header to gitlab, but it’s pretty difficult.

Where should I write this function when using Netlify function (or should it be deployed to gitlab.ie.u-ryukyu.ac.jp?)

I’m sorry I can’t understand the contents of the article well. Thank you very much.

Hi @AnaTofuZ,
I could only find this Documenting how to setup CORS with an Example for ease of use (follow-up to gitlab-foss 50125) (#5425) · Issues · GitLab.org / omnibus-gitlab · GitLab in reference for GitLab CORS configuration.

I think you should add that function to your Netlify site. See more here Functions overview | Netlify Docs

The idea is to have the function serve as a proxy (which sends correct CORS headers).
The CMS will send requests to the function which will proxy the requests to the self hosted GitLab instance.
Hopefully that makes things more clear.

1 Like

Hi @erez

Thank you. Thanks to everyone, I was able to use Netlify CMS safely.

Thank you for your kindness.

2 Likes

Hi @AnaTofuZ – how did you go about resolving this? I have a similar set up as you (self hosted gitlab and domain) so if you can share what you did that would be much appreciated!