Access to XMLHttpRequest at 'https://player.vimeo.com/video/<your_id>/config'
from origin 'https://example.com' 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:
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:
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.
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.
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?
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
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?
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 “https://player.vimeo.com/video/475154175/config”. 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.