CORS error on Explorer when adding personal API node

Posted the same as a github issue. Posting here as well to see if anyone has run into this before…

When starting the explorer with NEXT_PUBLIC_MAINNET_API_SERVER environment variable pointing to a non-hiro API node it throws the following CORS error:

Access to fetch at 'https://stacks-api.burnchain.io/extended/v1/tx/mempool?limit=10&offset=0&unanchored=true' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-hiro-product is not allowed by Access-Control-Allow-Headers in preflight response.
fetch.ts?b411:5          GET https://stacks-api.burnchain.io/extended/v1/tx/mempool?limit=10&offset=0&unanchored=true net::ERR_FAILED

A similar error is thrown when attempting to add a 3rd party API node to https://explorer.stacks.co

Access to fetch at 'https://stacks-api.burnchain.io/v2/info' from origin 'https://explorer.stacks.co' has been blocked by CORS policy: Request header field x-hiro-product is not allowed by Access-Control-Allow-Headers in preflight response.
_app-8eb23ca60de3fec7.js:1          GET https://stacks-api.burnchain.io/v2/info net::ERR_FAILED

To Reproduce
Steps to reproduce the behavior:

  1. Go to ‘https://explorer.stacks.co
  2. Click on ‘Network → Add Network’
  3. Enter following values ‘Name: XYZ, URL: https://stacks-api.burnchain.io
  4. See error

Expected behavior
The alternate API node works with the Explorer (if not the stacks.co site, at least when running on localhost).

Screenshots
image
image

Desktop (please complete the following information):

  • OS: MacOS
  • Browser Chrome
  • Version 104.0.5112.101 (Official Build) (x86_64)
1 Like

CC @lmcbeth. Looking for help. Please!