I’m currently working on a personal web app project where I would like to access the Materials Project API using a RESTful approach rather than the typical mp-api Python tool. The goal is to fetch material structures directly via HTTP/HTTPS requests, UI looks like this:
However, I’m encountering a persistent issue where our requests are met with a 403 Forbidden error, despite being certain that my API key is correct.
Setup
-
Netlify Function as Proxy: I have a serverless function deployed on Netlify that acts as a proxy to the Materials Project API. This function is written in JavaScript and uses Axios to make the requests. Using a Netlify function as a proxy should allow us to securely handle API keys and manage CORS issues in a serverless environment without exposing sensitive data.
-
Client-Side Code: The web app is written in TypeScript, which constructs the request URL and appends the necessary query parameters, including the
material_idandapi_key. -
Error Details: I’m met with
Status: 403suggesting authentication issue, but I’m positive that the API key I’m testing with is correct.
Here is a snippet of the client-side code for context:
const url = new URL(API_BASE_URL, window.location.origin);
url.searchParams.append('material_id', materialId);
url.searchParams.append('api_key', apiKey);
const response = await fetch(url.toString(), {
method: 'GET',
headers: {
'Accept': 'application/json'
}
});
And the Netlify function:
const response = await axios.get(url, {
headers: {
'X-API-KEY': api_key,
'Accept': 'application/json',
'Access-Control-Allow-Origin': '*',
},
validateStatus: (status) => status < 500
});
Has anyone successfully used the RESTful API to access the Materials Project data through a proxy setup like this? Are there any specific headers or configurations that might be missing? Any insights or suggestions would be greatly appreciated!
-Stefan