mapbox-gl-js
mapbox-gl-js copied to clipboard
mapbox
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
mapbox-gl-js version: "version": "3.2.0"
browser:
- Google Chrome Version 123.0.6312.122 (Official Build) (64-bit)
- 124.0.2 (64-bit)
Steps to Trigger Behavior
- let map = new Map({ accessToken: <my registered KEY>, container: 'map', style: 'mapbox://styles/mapbox/standard', center: [86.922623, 27.986065], zoom: 16, minZoom: 1, testMode: true });
- run the app in a browser
Expected Behavior
Must work reliable
Actual Behavior
It began to show CORS error around a week ago in ~50% of cases of run the app with the same map options.
and it is only with URLs like tiles.mapbox.com/3dtiles/v1/mapbox.mapbox-3dbuildings-v1/:
This issue prevents map.on('load', ....
it seems to be because of cloudfront. using cloudfront you increase dependency and reduce reliability of your services. professionals are massively removing their domains from the cloudfront
The CORS error seems to be because we're getting a 504, which cloudfront does not set CORS headers on. CloudFront claims that it could not connect to the mapbox tile servers.
The issue seems to be intermittent, but when it's occurring it can be reproduced by curling the offending url:
> curl -i 'https://b.tiles.mapbox.com/3dtiles/v1/mapbox.mapbox-3dbuildings-v1/14/15064/9825.glb?access_token=[ACCESS_TOKEN]'
HTTP/1.1 504 Gateway Time-out
Content-Type: text/html
Content-Length: 1033
Connection: keep-alive
Server: CloudFront
Date: Wed, 01 May 2024 00:19:45 GMT
X-Cache: Error from cloudfront
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>ERROR: The request could not be satisfied</TITLE>
</HEAD><BODY>
<H1>504 ERROR</H1>
<H2>The request could not be satisfied.</H2>
<HR noshade size="1px">
CloudFront attempted to establish a connection with the origin, but either the attempt failed or the origin closed the connection.
We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
<BR clear="all">
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
<BR clear="all">
<HR noshade size="1px">
<PRE>
Generated by cloudfront (CloudFront)
</PRE>
<ADDRESS>
</ADDRESS>
Hi everyone! Sorry for the delay. There was an issue on the API side, and it was fixed recently. Please check that everything works now. I'll close the issue, but please feel free to comment and reopen it if it happens again.
