Is getServerSideProps only allow HTTPS call? It's always failing when using localhost:xxxx

Unanswered

Paper wasp posted this in #help-forum

Paper waspOP

2023-09-23T17:15:36.000Z

Is getServerSideProps only allow HTTPS call? It's always failing when using http://localhost:xxxx?

I'm using fetch as follows:

fetch(process.env.NEXT_PUBLIC_API_URL + url, {
      headers,
      body: method !== 'GET' ? body : null,
      method,
    })

24 Replies

@Paper wasp Is getServerSideProps only allow HTTPS call? It's always failing when using http://localhost:xxxx? I'm using `fetch` as follows: fetch(process.env.NEXT_PUBLIC_API_URL + url, { headers, body: method !== 'GET' ? body : null, method, })

joulev

2023-09-23T17:21:42.000Z

https://nextjs-faq.com/fetch-api-in-getserversideprops

Gssp accepts both https and http, but donâ€™t fetch your own api routes there

If you fetch from a separate app like a separate backend then itâ€™s fine

But fetching from the same nextjs app is not fine

Paper waspOP

2023-09-23T17:27:47.000Z

Hi @joulev appreciate your response, I want to clarify that I'm using a Laravel API for that http://localhost:8000 call, is it possible?

joulev

2023-09-23T17:28:00.000Z

Yes then it is fine

Are you sure it is a correct url?

Maybe console.logging the api_url + url path and see

Also show the fetch failed error with the info below it

Paper waspOP

2023-09-23T17:29:06.000Z

Yes, I think that's already correct, but let me recheck it

@joulev Also show the fetch failed error with the info below it

Paper waspOP

2023-09-23T17:29:11.000Z

Sure, in a min

 â¨¯ TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)     
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getServerSideProps (webpack-internal:///./src/pages/save-the-date/[key].tsx:21:17) {
  cause: Error: connect ECONNREFUSED ::1:8000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 8000
  },
  page: '/save-the-date/2e74ab6fa6-andi'
}

Here is the error @joulev

The path is http://localhost:8000/reservations/id

@Paper wasp â¨¯ TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11457:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async getServerSideProps (webpack-internal:///./src/pages/save-the-date/[key].tsx:21:17) { cause: Error: connect ECONNREFUSED ::1:8000 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) { errno: -4078, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 8000 }, page: '/save-the-date/2e74ab6fa6-andi' }

joulev

2023-09-23T17:30:25.000Z

Do you have a server running at localhost:8000 when you run this?

Paper waspOP

2023-09-23T17:30:26.000Z

Here's the console log result

Yes I do, here's the snap of the server (I'm using Laravel with CORS free)

I tried to host my Laravel API to public using ngrok, then access it using https it's working just fine on getServerSideProps

joulev

2023-09-23T17:32:01.000Z

Weirdâ€¦ because gssp should be able to handle both just fine

Can you write a simple nodejs script that fetches that endpoint, then run nodejs on it

See if it works

To simulate gssp

Paper waspOP

2023-09-23T17:32:51.000Z

Got it, I will get back to you on this, I'm also finding this quite weird

Thanks for the help @joulev