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

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 “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.

  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!

Did you test it using a rest client ?

https://<your-domain>.com/api/getvimeo/?id=<some-id> 

Also i can see the following as well


Could you check if the functions has been deployed ?

I tried to test it through the postman but it is saying page not found! Yes, that’s super weird it is clearly saying that 0 new functions to upload, so how do I fix it? How do I make sure that it will be deployed?

How my toml file should look like?

This is how it looks now:

[build]
functions = "./functions/"

Okay so I figure out the path to the folder “functions” wasn’t right, so I fixed it and now everything is great.

Thank you very much!

1 Like

Hi @titusrk, @luke, @hillary, @hrishikesh! I’m sorry that bothers you, but now my whole website is not working!

It is giving me an error:

Uncaught SyntaxError: Unexpected token <

I read this subject

I think this is the subject of my problem but I didn’t get a clear answer from it.
Do you know what I suppose to do and why is it not working? You already know my situation, what I did, again I just add the function, the js file, and now the website is not working. Can you please help me? Can you please give me a clear answer?

Here is my deployment console:

11:16:15 AM: Build ready to start
11:16:24 AM: build-image version: d2c6dbeac570350a387d832f64bc980dc964ad65 (focal)
11:16:24 AM: build-image tag: v4.8.0
11:16:24 AM: buildbot version: e58b6be665675c0f99b33132a8c1eec1f775eba1
11:16:24 AM: Fetching cached dependencies
11:16:24 AM: Starting to download cache of 784.5MB
11:16:33 AM: Finished downloading cache in 9.475549057s
11:16:33 AM: Starting to extract cache
11:16:43 AM: Finished extracting cache in 9.571142299s
11:16:43 AM: Finished fetching cache in 19.117683835s
11:16:43 AM: Starting to prepare the repo for build
11:16:43 AM: Preparing Git Reference refs/heads/test
11:17:04 AM: Parsing package.json dependencies
11:17:05 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'MyCtoFriend_App/build/web' versus 'build/web' in the Netlify UI
11:17:05 AM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'MyCtoFriend_App/build/web/functions' versus 'build/web/functions' in the Netlify UI
11:17:06 AM: Starting build script
11:17:06 AM: Installing dependencies
11:17:06 AM: Python version set to 2.7
11:17:06 AM: Started restoring cached node version
11:17:07 AM: Finished restoring cached node version
11:17:07 AM: v16.14.2 is already installed.
11:17:08 AM: Now using node v16.14.2 (npm v8.5.0)
11:17:08 AM: Started restoring cached build plugins
11:17:08 AM: Finished restoring cached build plugins
11:17:08 AM: Attempting ruby version 2.7.2, read from environment
11:17:09 AM: Using ruby version 2.7.2
11:17:09 AM: Using PHP version 8.0
11:17:09 AM: No npm workspaces detected
11:17:09 AM: Started restoring cached node modules
11:17:09 AM: Finished restoring cached node modules
11:17:10 AM: Started restoring cached go cache
11:17:10 AM: Finished restoring cached go cache
11:17:10 AM: go version go1.16.5 linux/amd64
11:17:10 AM: go version go1.16.5 linux/amd64
11:17:10 AM: Installing missing commands
11:17:10 AM: Verify run directory
11:17:11 AM: ​
11:17:11 AM: ────────────────────────────────────────────────────────────────
11:17:11 AM:   Netlify Build                                                 
11:17:11 AM: ────────────────────────────────────────────────────────────────
11:17:11 AM: ​
11:17:11 AM: ❯ Version
11:17:11 AM:   @netlify/build 27.0.1
11:17:11 AM: ​
11:17:11 AM: ❯ Flags
11:17:11 AM:   baseRelDir: true
11:17:11 AM:   buildId: 6262725fbc136b00081acc2d
11:17:11 AM: Creating deploy upload records
11:17:11 AM:   deployId: 6262725fbc136b00081acc2f
11:17:11 AM: ​
11:17:11 AM: ❯ Current directory
11:17:11 AM:   /opt/build/repo/MyCtoFriend_App
11:17:11 AM: ​
11:17:11 AM: ❯ Config file
11:17:11 AM:   No config file was defined: using default values.
11:17:11 AM: ​
11:17:11 AM: ❯ Context
11:17:11 AM:   production
11:17:11 AM: ​
11:17:11 AM: ────────────────────────────────────────────────────────────────
11:17:11 AM:   1. Functions bundling                                         
11:17:11 AM: ────────────────────────────────────────────────────────────────
11:17:11 AM: ​
11:17:11 AM: Packaging Functions from build/web/functions directory:
11:17:11 AM:  - getVimeo/getVimeo.js
11:17:11 AM: ​
11:17:12 AM: Starting post processing
11:17:11 AM: ​
11:17:11 AM: (Functions bundling completed in 220ms)
11:17:11 AM: ​
11:17:11 AM: ────────────────────────────────────────────────────────────────
11:17:11 AM:   2. Deploy site                                                
11:17:11 AM: ────────────────────────────────────────────────────────────────
11:17:11 AM: ​
11:17:11 AM: Starting to deploy site from 'MyCtoFriend_App/build/web'
11:17:11 AM: Creating deploy tree 
11:17:12 AM: 1 new files to upload
11:17:13 AM: Post processing - HTML
11:17:12 AM: 0 new functions to upload
11:17:12 AM: Site deploy was successfully initiated
11:17:12 AM: ​
11:17:12 AM: (Deploy site completed in 629ms)
11:17:13 AM: Post processing - header rules
11:17:12 AM: ​
11:17:12 AM: ────────────────────────────────────────────────────────────────
11:17:12 AM:   Netlify Build Complete                                        
11:17:12 AM: ────────────────────────────────────────────────────────────────
11:17:12 AM: ​
11:17:12 AM: (Netlify Build completed in 932ms)
11:17:12 AM: Caching artifacts
11:17:13 AM: Post processing - redirect rules
11:17:12 AM: Started saving node modules
11:17:12 AM: Finished saving node modules
11:17:12 AM: Started saving build plugins
11:17:12 AM: Finished saving build plugins
11:17:12 AM: Started saving pip cache
11:17:13 AM: Post processing done
11:17:12 AM: Finished saving pip cache
11:17:12 AM: Started saving emacs cask dependencies
11:17:12 AM: Finished saving emacs cask dependencies
11:17:12 AM: Started saving maven dependencies
11:17:12 AM: Finished saving maven dependencies
11:17:12 AM: Started saving boot dependencies
11:17:12 AM: Finished saving boot dependencies
11:17:12 AM: Started saving rust rustup cache
11:17:12 AM: Finished saving rust rustup cache
11:17:12 AM: Started saving go dependencies
11:17:12 AM: Finished saving go dependencies
11:17:12 AM: Build script success
11:17:17 AM: Site is live ✨
11:18:16 AM: Finished processing build request in 1m52.19845119s

I’m trying to add some headers related to the cache, but not sure what specifically I need, will gladly appreciate if you would be able to help me :slight_smile:

Now, I did something, not sure what specifically, and it starts working on the chrome on my windows laptop, and on the chrome on mobile, but it is not working on safari…

Hey @myctofriend,

I didn’t interfere between the conversation that you and @titusrk were having as it seemed you both were getting somewhere. However, I believe you don’t need Netlify Functions for this the CORS problem can you can directly move on with using Netlify Rewrites.

For example, if you add the following rule:

/video/* https://player.vimeo.com/video/:splat/config 200!

I believe, you can simply pass the video ID in the URL like /video/12345 and that would be converted to https://player.vimeo.com/video/12345/config. From my reading, that’s all you need, but correct me if I’m wrong.

About the new error that you’re getting, the problem occurs when you’re sending a HTML file for a JavaScript request. But, I don’t see that problem appearing on your website (at least not on the login page) on Chrome as well as Safari. In most cases, it happen when a JavaScript file is requested, but that file doesn’t exist and thus, we serve the index.html (based on the second rewrite rule that you have currently) and thus, the file appears to be invalid.

Thank you very much, you are right it is working even without the functions! Amazing!

But what about the black page that I have on safari, on chrome on windows it is working, and on android as well, but on the safari on mac, didn’t check on the iPhone, it is not working! If I check the console on the mac apparently the script with the main.dart.js is not appearing, and I think this is why, I have a black-white screen. On the chrome on windows, the main.dart.js script is there!

Do you know why? Can you check my website rn? Is it working on you safari?

Yes, I checked your website on Safari and it appears to load:

Do you have any idea why it is not working? Maybe a version of the safari? Do you know how can I fix it?

I can see that you’ve a service worker, did you try clearing that?