search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.21k stars 2.22k forks source link

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' #13155

Closed almaz1213 closed 6 months ago

almaz1213 commented 6 months ago

mapbox-gl-js version: "version": "3.2.0"

browser:

  1. Google Chrome Version 123.0.6312.122 (Official Build) (64-bit)
  2. 124.0.2 (64-bit)

Steps to Trigger Behavior

  1. let map = new Map({ accessToken: , container: 'map', style: 'mapbox://styles/mapbox/standard', center: [86.922623, 27.986065], zoom: 16, minZoom: 1, testMode: true });
  2. 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.

1

and it is only with URLs like tiles.mapbox.com/3dtiles/v1/mapbox.mapbox-3dbuildings-v1/: 1

This issue prevents map.on('load', ....

NorrisWu0 commented 6 months ago

getting the same issue here too

almaz1213 commented 6 months ago

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

joashc commented 6 months ago

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>
stepankuzmin commented 6 months ago

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.