TypeError: Failed to fetch

[0xharold]

I was following Devcon VI Workshop to build a snap fetching data from an API endpoint. Unfortunately, I am not able to fetch data as it keeps returning:

Access to fetch at 'http://127.0.0.1:8065/vul/<chainId>/<address>' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

The API endpoint is build in FastAPI. Here are crucial parts:

app = FastAPI()

origins = ["http://localhost:8080"]

app.add_middleware(
    CORSMiddleware, allow_origins=origins, allow_methods=["*"], allow_headers=["*"]
)

which keeps returning:

127.0.0.1:55806 - "OPTIONS /vul/<chainId>/<address> HTTP/1.1" 400 Bad Request

In the snap I am using:

const API_ENDPOINT = 'http://127.0.0.1:8065/vul/'

async function fetchData(
  chainId: number,
  address: string,
): Promise<IData> {
  const url = `${API_ENDPOINT}${chainId}/${address}`;
  console.log('Fetching data at: ', url);
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  });
  if (!response.ok) {
    throw new Error(`Unable to fetch data from ${url}`);
  }
  const results = (await response.json()) as IData;
  return results;
}

The snap.manifest.json contains:

"initialPermissions": {
    "endowment:transaction-insight": {},
    "endowment:network-access": {}
  },

The weird thing also is that it worked approximately one month earlier when I was playing with it for the first time.

Could anyone be so kind and provide me with a help?

[ziad-saab]

You're only allowing origin localhost:8080. Unfortunately that's just where the snap code is served from locally, not the origin of the request. For now, please use access-control-allow-origin: * to unblock yourself. We are currently documenting best practices for that. I will reply to this question with a link to our documentation once it's been updated.

[0xharold]

@ziad-saab thanks for reply!

It means that I need to expose our API to anyone and cannot add (for instance) authentication, right?

[Montoya]

We are working on an example of how to do authentication for API access

[ziad-saab]

@0xharold if you don't want to use * as an origin, then you can use null instead. The browser will send Origin: null when the request comes from a snap. Other environments use Origin: null as well.

That being said, you can certainly add authentication for your API: that's completely separate concern from CORS. It's beyond the scope of this forum to help with that, but like @Montoya said we will be providing an example of how that can be done on the snap side.

[0xharold]

@ziad-saab @Montoya thank you both!
If you can be so kind and ping me here once the example is out, I would be very grateful.

[ziad-saab]

will do, you can expect it in the next week or two at most.

[0xharold]

@ziad-saab @Montoya
Hi guys,
I was wondering if your example could also include a proper .env variable management inside a snap? TBH I have been struggling with it.
Thank you very much in advance!

[ziad-saab]

our documentation is currently lacking an example of how to do this. my suggestion would be to try to plug envify in the snap config file.

let me know how that works for you. also i'm curious what kind of env vars you're looking to plug in your snap. cheers!

[ziad-saab]

there's an example here: https://github.com/onetrickwolf/env-snap-example/blob/main/packages/snap/snap.config.js#L9-L16

[0xharold]

Thanks a lot, will look at it!

I want to add credentials to the .env file which will be loaded in the snap and only then data from our API will be fetched.
Also another workaround could be having prompts for user to add their credentials, right?

[ziad-saab]

remember that the snap is a static javascript file that is publicly available. any environment variables, i.e. "process.env", will be transformed by browserify into simple strings that will be readable by everyone. you must not have any private/sensitive information anywhere in your snap code.

the example i'm working on will show a proper way to have a snap's companion dapp request credentials by signing in to an API, either through SIWE or a more traditional OAuth method, then retrieving an API key/credential that can be communicated to the snap, which will then store it in the safe snap storage area.

[0xharold]

I will keep that in mind, thanks for the info! Cannot wait for the example though!