CORS issue with Vimeo in Flutter (Access to XMLHttpRequest has been blocked by CORS policy)

Hey, guys, I need help with the CORS issue!
Whenever I do the get request of this link<your_id>/config

I get this issue

Access to XMLHttpRequest at '<your_id>/config' 
from origin '' 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.

I already created a _headers file

Here is the code of it:

    Access-Control-Allow-Origin: *

And also the netlify.toml file
Here is the code:

  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    Access-Control-Allow-Origin = "*"

Nothing is working! What should I do?

Here is the request that I’m doing in the flutter:

    final response = await http.get(urlForGet, headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',

Also here is what my files look like:

Can someone help me please? I’m really struggling with it and not understanding why it’s not working!

In order to troubleshoot this, we will need the real URL where that error is occurring. In other words, we need to be able to see this in the browser devtools to research this.

You can post that information publicly or you can private message (PM) that to one of our support staff. I’ve confirmed that PMs are enabled for your forum login. Please keep in mind that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

@luke Here is the link:

Hi, @myctofriend. That URL isn’t hosted on Netlify and there is no CORS error for it.

We need to know the URL at Netlify where this error is occurring. What URL can we load where we will see the error in the devtools?

Hi, @luke.

Here is the link:

However, there is no point to share the link because here on Netifly, I deployed a full app, in which you will have to be registered, and then you should have an attached track to your specific account, to then open the specific step in the track to finally load a get request that causing me the CORS problem. Hopefully, you understand what I mean.

I’m just trying to do the get request of the link that I sent you above, again here it is"".

Will you be able to send me your discord or something, so that I can record you a video to show where the error appears, or maybe even set up a meeting together so that I can show you what is the error and when it appears in the real-time? Actually, is a video of screen okay for you?

Hey @myctofriend,

In that case, you can either create a screen record and upload it to some cloud storage and share the link OR share a HAR file recording for us to check.

Hey @hrishikesh and @luke! Here is the link to the video with the problem!

Will wait for your reply :slight_smile:

Here is my understanding , Your website ( hosted in Netlify ) is trying to invoke " ". from client side.

Here is the thing , when ever you invoke a REST API from client side , Browser for security reasons, do not directly allow this cross-origin requests to go through. Before firing the actual GET request, it instead fires an OPTIONS request to the cross-origin with all the details of the CORS request.

These are the headers received for the preflight request.

  • Access-Control-Allow-Origin - specifies the requested origin if it has access.
  • Access-Control-Allow-Methods - specifies which methods are allowed for CORS.
  • Access-Control-Allow-Headers - specifies which headers can be used with the actual CORS request.
  • Access-Control-Max-Age - specifies how much time (in seconds) the response of the preflight request can be cached. The browser will skip further preflight requests and directly hit the actual request during that time period.

If it doesn’t have those headers , Browser wont show the response

Here are the response headers for your URL that your are trying to invoke from your Web Application. I do not see any CORS Headers for this.

curl -X OPTIONS --head ""

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 0
Server: nginx
Content-Type: text/html; charset=UTF-8
X-Xss-Protection: 1; mode=block
X-Host: player-v1117-pj6d4
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Cache-Control: max-age=14400
P3p: CP="This is not a P3P policy! See"
Expires: Wed, 20 Apr 2022 12:22:09 GMT
X-Vimeo-DC: ge
Accept-Ranges: bytes
Date: Wed, 20 Apr 2022 08:22:09 GMT
Via: 1.1 varnish
X-Served-By: cache-maa10228-MAA
X-Cache: MISS
X-Cache-Hits: 0
X-Timer: S1650442930.514738,VS0,VE256
Vary: Origin, Accept-Encoding
X-Player-Backend: p

Solution to this is , you might have to trigger this API from Server Side or You can write wrapper API ( using Netlify functions ) to invoke this API from server side.

Hi, @titusrk! Thanks for such a detailed answer.

I have a small problem, I never wrote any wrapper API (using Netlify functions), so I understand almost nothing in it. I wanted to ask you do you have anywhere a good example of how I suppose to do it? Maybe you previously did it? Or maybe you have a good guideline?

By doing the request I’m saving a lot of info from the response, will I be able to do it with the wrapper API to then use the info inside of the web app?

Looking forward for your reply.

Hi @myctofriend

You can read all about it from the following sources. if you have experience writing NodeJS Code, it will be very easy.

@titusrk I have an experience in Nodejs, but still not sure how then use the response that I got directly in the app, I mean how to transfer the response from the Netifly function to the dart file?

Okay, thanks you for now, I will try to learn and understand how it works, if I will have more questions I will come back! Thanks, again!

Once you write a Netlify Function ( Which internally invokes your vimeo API ) & deploy the same into Netlify . It itself will be a standalone REST API.
You can invoke this standalone API from your dart code. ( I hope you are not using a Dart SDK for vimeo , if you are using some Dart SDK , then it wont work )

Hmm but the link is digital, it is not just “”. The ID of the video is always changing, depending on what step you are opening, so I’m still thinking of somehow solving this issue with the client-side, is there any way? I have too many questions on how to do it on the server-side.

  1. Pass the Dynamic ID as a query parameter to your Netlify Function
  2. Programatically form the vimeo url using the id from the query parameter
  3. Invoke the programatically generated vimeo url within your netlify function , get the response
  4. set this response from step 3 as response for your Netlify function

I think this is what I’m trying to do right now, let me see! Thanks for now!

SO, I spent some time understanding how to properly do it, but in the end, I made it!!! Everything is working and now there is no issue with the CORS, so thank you very much for your help! :partying_face: :partying_face: :partying_face:

So glad this is working for you now. Thanks for the details responses here! They will be beneficial to future Forums members who encounter something similar in the future.

@titusrk @hillary @hrishikesh @luke Wait a second, I was testing your idea on the localhost (netlify dev), but on the real netlify website, it is giving me a new problem

Here is the video of the problem:

Do you understand why I’m getting this problem? Is the function not hosting on the netlify or why?

@titusrk @hillary @hrishikesh @luke Okay, so I read a bit, and find that a problem in the redirections.

Do you guys know how to redirect all paths to the /index.html but the /.netlify/functions/: to the /api/*

This works on the localhost (Netlify dev) (_redirects file):

/api/*  /.netlify/functions/:splat  200!
/*    /index.html   200

But it is not working on the real website, it is saying that page not found and the 404 error!