(canceled) requests to external api
Answered
Acorn-plum gall posted this in #help-forum
Acorn-plum gallOP
API using Flask Gunicorn 4 workers. Port 80 but uses cloudflare for SSL on api.my-domain.com
Frontend is running latest version of nextjs, built then served on poart 80, using cloudflare for SSL on admin.my-domain.com
The website used to work perfectly when I was running both on localhost ports 3000 and 3001. Any help would be appreciated. Thanks.
Frontend is running latest version of nextjs, built then served on poart 80, using cloudflare for SSL on admin.my-domain.com
The website used to work perfectly when I was running both on localhost ports 3000 and 3001. Any help would be appreciated. Thanks.
Answered by maxswjeon
That's really strange. Might be a cache problem of your specific browser?
35 Replies
1. If Cloudflare is used for SSL, the port will be 443 (for admin.my-domain.com)
2. CORS might be the issue
2. CORS might be the issue
Acorn-plum gallOP
CORS isn't the issue (already handled). the website works perfectly, however when I call api.my-domain.com/auth from the frontend, I get request status (canceled) and an error
So other API calls are working?
Acorn-plum gallOP
Actually, it seems to be only an issue on Chrome, let me clear storage data and try again
Okay
Acorn-plum gallOP
Nope, same thing but I just tried it in incognito and it works fine
I suspect the Port, since the cloudflare listens on 443 when SSL is enabled
Acorn-plum gallOP
Cleared storage data, same thing
incognito tho 🤨
Hmmm... That's very strange
Acorn-plum gallOP
I don't think that's a NextJS issue per se but if anyone had a similar issue I'd appreciate the help
Indeed
Is there more detail why it is canceled? Might be a extension problem, like adblocker
Acorn-plum gallOP
Interesting, the link does include "ad" so this could be it, let me check and get back to you
Extensions weren't the issue, uninstalled all extensions and cleared storage again, same thing
I think I need more information (sorry for the repetition...) Trying NetLog Dump might be helpful... https://www.chromium.org/for-testers/providing-network-details/
(This advice is given with the background https://stackoverflow.com/questions/12009423/what-does-status-canceled-for-a-resource-mean-in-chrome-developer-tools)
Acorn-plum gallOP
{"params":{"cors_preflight_policy":"consider_preflight","headers":"sec-ch-ua: \"Not.A/Brand\";v=\"8\", \"Chromium\";v=\"114\", \"Google Chrome\";v=\"114\"\r\nAccept: application/json, text/plain, */*\r\nsec-ch-ua-mobile: ?0\r\nAuthorization: whatever\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36\r\nsec-ch-ua-platform: \"Windows\"\r\n\r\n","is_revalidating":false,"method":"GET","url":"https://api.whatever.com/employee/items?limit=10&page=0"},"phase":1,"source":{"id":298006,"start_time":"952321017","type":1},"time":"952321017","type":505},
I'm honestly not sure what information I need to provide but let me know if there's anything specific. I'll try to look for more related stuff
Acorn-plum gallOP
Interestingly
But I am sure the code calls the api with https
The page at 'https://admin.whatever.com/items/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.whatever.com/employee/me/'. This request has been blocked; the content must be served over HTTPS.
But I am sure the code calls the api with https
Oh the Mixed-content error
Can you provide the code that fetches the api?
Acorn-plum gallOP
Sure
export default async function request(method, endpoint, data, headers = {}) {
try {
var resp = await axios({
method: method,
url: 'https://api.whatever.com/employee/' + endpoint,
data: data,
headers: headers
})
return resp.data
} catch (err) {
// check if error has response object
if (err.response) {
return err.response.data
}
// else return generic error
console.log(err)
return { success: false, message: 'Something went wrong!' }
}
}
and
export default async function authRequest(method, endpoint, data, headers = {}) {
try {
var resp = await axios({
method: method,
url: 'https://api.whatever.com/employee/' + endpoint,
data: data,
headers: { ...headers, Authorization: localStorage.getItem('token') }
})
return resp.data
} catch (err) {
// check if error has response object
if (err.response) {
return err.response.data
}
// else return generic error
console.log(err)
return { success: false, message: 'Something went wrong!' }
}
}
needs refactoring will do laterâ„¢ï¸
and fetching the items
const res = await authRequest('GET', `items?limit=${rowsPerPage}&page=${page * rowsPerPage}`)
Interestingly, this works
but this
is canceled
var resp = await request('post', 'auth/login', params)
but this
var resp = await request('GET', 'me', {}, { Authorization: storedToken })
is canceled
Also, just tried it on a different browser, and a different laptop (not with incognito) both work just fine
That's really strange. Might be a cache problem of your specific browser?
Answer
Acorn-plum gallOP
...
yeah it works now 💀
Thanks @maxswjeon you're the GOAT
I'm happy to hear that!