Web stories CORS issue

My issue is that videos aren’t playing in the web stories I’m creating on my wordpress site. EG this URL: How To Do The Perfect Chignon Bun | 5 Minutes To Chic

Google has found this error and provided this fix I’m hoping you can help me with please. I have turned off the CDN in WPengine to make sure the 2 CDN’s aren’t conflicting and yours is the only CDN I’m using.

“It appears there are many console error messages related to access blocked by CORs policy. This CORS error occurs when your site is trying to load files from a different domain than your WordPress domain, so your CDN needs to provide this Access-Control-Allow-Origin response header for all these assets. Your provider will need to help you adjust your CORS settings to make them less restrictive and allow these files to be accessed.Please contact your website administrator or hosting provider to further assistance with setting the header.”

The only videos I can see on that page are loading from https://i0.wp.com, and they return a 400 HTTP status code. CORS is not really relevant if the response is an error.

% curl https://i0.wp.com/glamourandgains.com/wp-content/uploads/2021/11/how-do-chignon-bun-easy-part-1-1.mp4 -H "Origin: https://glamourandgains.com" --dump-header -
HTTP/2 400
server: nginx
date: Wed, 03 Nov 2021 22:02:44 GMT
content-type: text/html; charset=utf-8
x-nc: HIT lhr 7

Error 0004. Unable to load the image.%

Thanks so much for your help and fast response. That’s strange as I’m dragging and dropping the videos into the web stories plugin in wordpress and not deleting them, they’re all there. So not sure how to fix this issue? When I inspect the element I get the same issues Google found:

"nsure CORS response header values are valid
A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request.
To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.
Note that if an opaque response is sufficient, the request’s mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).
3 requests

Request Status Preflight Request (if problematic) Header Problem Invalid Value (if available)
how-do-sleek-bun-step-2-glamour-gains-hair-tutorial-1.mp4?amp_video_host_url=https%3A%2F%2Fglamourandgains.com%2Fweb-stories%2Fhow-to-do-easy-chignon-bun-fast-chic-hair%2F&__amp_source_origin=https%3A%2F%2Fglamourandgains.com blocked Access-Control-Allow-Origin Missing Header

"

I don’t have a video plugin, I’m uploading straight into the latest version of the web stories plugin (fully compressed in MP4 format).

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.