dmikester1 – 18-02 Nov 28

I'm trying to make an API request to zipcodestack.com to get the associated city and state for a given zip code. I keep getting this error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.zipcodestack.com/v1/search?codes=54703&country=us. (Reason: header ‘apikey’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response). I tested it with Postman and it worked fine, so nothing wrong with the API.
D
dmikester1142d ago
Here is my javascript code:
let url: URL = new URL('https://api.zipcodestack.com/v1/search');
const params = {
codes: cleanZip,
country: 'us'
};
Object.keys(params).forEach((key) =>
url.searchParams.append(key, params[key])
);
const headers = {
apikey: import.meta.env.VITE_ZIPCODESTACK_API_KEY,
Accept: 'application/json'
// 'Access-Control-Allow-Headers': '*', // this will allow all CORS requests
// 'Access-Control-Allow-Methods': 'OPTIONS,POST,GET', // this states the allowed methods
// 'Content-Type': 'application/json' // this shows the expected content type
};
console.log({ headers });
axios
.get(url, { headers })
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
let url: URL = new URL('https://api.zipcodestack.com/v1/search');
const params = {
codes: cleanZip,
country: 'us'
};
Object.keys(params).forEach((key) =>
url.searchParams.append(key, params[key])
);
const headers = {
apikey: import.meta.env.VITE_ZIPCODESTACK_API_KEY,
Accept: 'application/json'
// 'Access-Control-Allow-Headers': '*', // this will allow all CORS requests
// 'Access-Control-Allow-Methods': 'OPTIONS,POST,GET', // this states the allowed methods
// 'Content-Type': 'application/json' // this shows the expected content type
};
console.log({ headers });
axios
.get(url, { headers })
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
In the docs, they use 'fetch' like this:
const url = new URL(
"https://api.zipcodestack.com/v1/search"
);

const params = {
"codes": "99501,90210",
"country": "us",
};
Object.keys(params)
.forEach(key => url.searchParams.append(key, params[key]));

const headers = {
"apikey": "{YOUR_API_KEY}",
"Accept": "application/json",
};

fetch(url, {
method: "GET",
headers,
}).then(response => response.json());
const url = new URL(
"https://api.zipcodestack.com/v1/search"
);

const params = {
"codes": "99501,90210",
"country": "us",
};
Object.keys(params)
.forEach(key => url.searchParams.append(key, params[key]));

const headers = {
"apikey": "{YOUR_API_KEY}",
"Accept": "application/json",
};

fetch(url, {
method: "GET",
headers,
}).then(response => response.json());
G
ghardin137142d ago
CORS is controlled by the server Not much the client can do about it
D
dmikester1142d ago
but if it is working fine in Postman, shouldn't I be able to make it work in my javascript?
G
ghardin137142d ago
Postman doesn’t care about CORS The browser does Can’t do anything from the client side code
D
dmikester1142d ago
oh, that stinks
G
ghardin137142d ago
The only thing you could do is make an API that you control that can make a request to that third party Which you’d likely want anyway so that you don’t expose your api keys to the world
D
dmikester1142d ago
oh, so make a route from my NodeJS backend to do it
G
ghardin137142d ago
Yep And have your backend deal with whatever CORS you need on the client
D
dmikester1142d ago
cool, thanks for the tip!
UU
Unknown User140d ago