Next.js Discord

Discord Forum

(canceled) requests to external api

Answered
Acorn-plum gall posted this in #help-forum
Open in Discord
Avatar
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.
Answered by maxswjeon
That's really strange. Might be a cache problem of your specific browser?
View full answer

35 Replies

Avatar
1. If Cloudflare is used for SSL, the port will be 443 (for admin.my-domain.com)
2. CORS might be the issue
Avatar
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
Avatar
So other API calls are working?
Avatar
Acorn-plum gallOP
Actually, it seems to be only an issue on Chrome, let me clear storage data and try again
Avatar
Okay
Avatar
Acorn-plum gallOP
Nope, same thing but I just tried it in incognito and it works fine
Avatar
I suspect the Port, since the cloudflare listens on 443 when SSL is enabled
Avatar
Acorn-plum gallOP
Cleared storage data, same thing
Image
incognito tho 🤨
Image
Avatar
Hmmm... That's very strange
Avatar
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
Avatar
Is there more detail why it is canceled? Might be a extension problem, like adblocker
Avatar
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
Avatar
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/
Avatar
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
Avatar
Acorn-plum gallOP
Interestingly

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
Avatar
Oh the Mixed-content error
Can you provide the code that fetches the api?
Avatar
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
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
Avatar
That's really strange. Might be a cache problem of your specific browser?
Answer
Avatar
Acorn-plum gallOP
...
yeah it works now 💀
Thanks @maxswjeon you're the GOAT
Avatar
I'm happy to hear that!