Hey, guys, I need help with the CORS issue!
Whenever I do the get request of this link https://player.vimeo.com/video/<your_id>/config
I get this issue
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:
/*
Access-Control-Allow-Origin: *
And also the netlify.toml file
Here is the code:
[[headers]]
# Define which paths this specific [[headers]] block will cover.
for = "/*"
[headers.values]
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?
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.
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 "https://player.vimeo.com/video/475154175/config"
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 https://vimeo.com/privacy"
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.
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?
@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?
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.
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!
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?
