title: Mapbox CORS Error When Loading Vector Source from S3
body: <p>I have been using <code>S3</code> to serve raster tiles to <code>Mapbox</code>. This has been fine and great, but now I want to add a vector tile source in the same <code>S3</code> bucket and through the same <code>Cloudfront</code> distribution and am getting a bunch of <code>CORS</code> errors. What makes this confusing is that the only thing that is different is that I am pulling in some <code>.png</code>s from a vector source rather than raster, so I don't see how this can be anything to do with <code>S3</code> or <code>Cloudfront</code>.</p>
  <p>These are errors in console:</p>
  <pre><code>has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  </code></pre>
  <p>This the working code to pull in the raster tiles:</p>
  <pre><code>this.map.addSource(l, {
      &quot;type&quot;: &quot;raster&quot;,
      &quot;tiles&quot;: [`https://&lt;my-cf-url&gt;.net/demo/${ft}/${rp}/{z}/{x}/{y}.png`],
  });
  this.map.addLayer({
      &quot;id&quot;: l,
      &quot;type&quot;: &quot;raster&quot;,
      &quot;source&quot;: l,
      &quot;paint&quot;: {
          &quot;raster-opacity&quot;: 0.6,
      }
  });
  </code></pre>
  <p>This is the code to pull in vector tiles:</p>
  <pre><code>this.map.addSource(&quot;layer&quot;, {
      &quot;type&quot;: &quot;vector&quot;,
      &quot;tiles&quot;: [&quot;https://&lt;my-cf-url&gt;.net/demo/{z}/{x}/{y}.png&quot;],
  });
  this.map.addLayer({
      &quot;id&quot;: &quot;layer&quot;,
      &quot;type&quot;: &quot;fill&quot;,
      &quot;source&quot;: &quot;layer&quot;,
      &quot;source-layer&quot;: &quot;pngs&quot;,
  });
  </code></pre>
  <p>If I specify raster rather than vector then <code>mapbox</code> logs decoding errors, which makes sense as the vector tiles were generated from a vector file.</p>
  <p>Am I doing something wrong, or is the CORS error known to be a red-herring hiding a problem with the data itself?</p>
  <p>Moreover, I can make CURL requests to the urls from my terminal and have no problem accessing them, it is only via <code>Mapbox</code> in the browser.</p>