How to reslove a firebase hosting CORS problem for HTML?

Question

1.00/5 (1 vote)

See more:

Hi. My problem is when I try to fetch the PDF file from another domain (using DFlip extension) I got CORS problem. The problem says:

Access to fetch at 'https://www.africau.edu/images/default/sample.pdf' from origin 'https://odskocna-daska.web.app' has been blocked by CORS policy: 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.

I using the Firebase Web Hosting (example: mywebsite.web.app) with HTML, CSS and JS. How to reslove that CORS problem to my website on Firebase Hosting can reach other domain?

My current firebase.json configuration file:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Please help. Thanks advance.

What I have tried:

{
  "hosting": {
    "public": "_site",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [{
      "source": "**",
      "headers": [{
        "key": "Access-Control-Allow-Origin",
        "value": "*"
      }, {
        "key": "Access-Control-Allow-Credentials",
        "value": "true"
      }, {
        "key": "Access-Control-Allow-Headers",
        "value": "Access-Control-Allow-Origin, Access-Control-Allow-Credentials"
      }]
    }, {
      "source": "**/*.@(jpg|jpeg|gif|png)",
      "headers": [{
        "key": "Cache-Control",
        "value": "max-age=7200"
      }]
    }],
    "redirects": [{
        "source": "/amp/news/:post*",
        "destination": "https://example.com/news/:post*",
        "type": 301
      }
    ]
  }
}

That is example from GitHub but it doesn't work.

Posted 5-Oct-22 2:42am

User 15226833

Updated 5-Oct-22 23:04pm

Add a Solution

Comments

Richard MacCutchan 5-Oct-22 9:22am

If you get some code from the internet that you do not understand, and it does not work, then the best place for help is the person who wrote the code.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2022-10-05T23:04:00

Setting the Cross-Origin Resource Sharing (CORS)[^] headers on your site will not magically allow script on your site to request resources on a remote site. If it did, that would defeat the whole purpose of CORS.

You need to change the configuration on the remote site to specify that your site is allowed to request resources from it.

If you can't do that, then you'll need to write a server-side "proxy" script to make the request from code running on your server, and change your script to call the proxy instead of the remote resource. How you do that will depend on which server-side framework you are using, which you haven't specified.