Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
almaz1213 opened this issue Apr 17, 2024 · 4 comments
Closed

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

almaz1213 opened this issue Apr 17, 2024 · 4 comments

Comments

@almaz1213
Copy link

almaz1213 commented Apr 17, 2024 •
edited

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
Copy link

getting the same issue here too

@almaz1213
Copy link
Author

almaz1213 commented Apr 19, 2024 •
edited

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
Copy link

joashc commented May 1, 2024

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@stepankuzmin @joashc @almaz1213 @NorrisWu0