CORS error with JS

Help Center
1

Sometimes I get this error when trying to fetch data from KNACK with JS. I tried a lot of fetch options etc. Sometimes it is ok sometimes I got CORS error. Is there any way to fix this?
Thanks

Access to fetch at ‘https://s3-ap-southeast-2.amazonaws.com/ap-southeast-2-assets.knack.com/assets/616391ee2e9161001e613faa/616392568f236607184d4ba0/original/proposedretail.png’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: 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.

here are my fetch options
const knackURL = ‘https://api.knackhq.com/v1/objects/’
const fetchOptions = {
cache: “force-cache”,
method: ‘GET’, // *GET, POST, PUT, DELETE, etc.
mode: ‘cors’, // no-cors, *cors, same-origin
credentials: ‘same-origin’, // include, same-origin, omit
headers: {
‘Content-Type’: ‘application/json’,
‘Access-Control-Allow-Origin’: '',
‘Access-Control-Allow-Methods’: ‘POST,PATCH,OPTIONS’,
‘X-Knack-Application-Id’: knack_id,
‘X-Knack-REST-API-Key’: knack_key
}
}

1 Like
2

Hey Benton. I see you’re trying to make this call from a localhost server. Sometimes a CORS block happens when you’re trying to access information from a server without an SSL certificate if the receiving server has https.

Can you try repeating the process using something like Ngrok to simulate a secure server?

3

Hey Arjun, it happens on HTTPS too.

I periodically receive error messages on JavaScript console about CORS error. Sometimes it is fine, but every second or third load it does not work. We use https. Thanks

Access to fetch at ‘https://api.knackhq.com/v1/objects/object_3/fields’ from origin ‘https://releaseplan.*’ 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.