dmikester1•12mo ago

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.

10 Replies

dmikester1OP•12mo 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());

ghardin137•12mo ago

CORS is controlled by the server Not much the client can do about it

dmikester1OP•12mo ago

but if it is working fine in Postman, shouldn't I be able to make it work in my javascript?

ghardin137•12mo ago

Postman doesn’t care about CORS The browser does Can’t do anything from the client side code

dmikester1OP•12mo ago

oh, that stinks

ghardin137•12mo 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

dmikester1OP•12mo ago

oh, so make a route from my NodeJS backend to do it

ghardin137•12mo ago

Yep And have your backend deal with whatever CORS you need on the client

dmikester1OP•12mo ago

cool, thanks for the tip!

reactibot•12mo ago

This thread hasn’t had any activity in 36 hours, so it’s now locked. Threads are closed automatically after 36 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1179120156170006638