cloudflare will block request from client?

I deployed a

nextjs

nextjs

nextjs

nextjs app on cloudflare, these are a server component and a api endpoint.
And the server component will request the api endpoint with

fetch(${getBaseUrl(req as NextRequest)}/api/search, {
    method: "POST",
  }).then(r=>r.json())

fetch(${getBaseUrl(req as NextRequest)}/api/search, {
    method: "POST",
  }).then(r=>r.json())

fetch(${getBaseUrl(req as NextRequest)}/api/search, {
    method: "POST",
  }).then(r=>r.json())

fetch(${getBaseUrl(req as NextRequest)}/api/search, {
    method: "POST",
  }).then(r=>r.json())

npm run dev

npm run dev

is ok, everything is fine. but after deploying on cloudflare, the

fetch

fetch

gives

SyntaxError: Unexpected token 'e', "error code: 522" is not valid JSON

SyntaxError: Unexpected token 'e', "error code: 522" is not valid JSON

SyntaxError: Unexpected token 'e', "error code: 522" is not valid JSON

SyntaxError: Unexpected token 'e', "error code: 522" is not valid JSON .

obviously, the response is not json. but why? it makes no sense that

cloudflare

cloudflare

cloudflare

cloudflare blocked the request?

Sam•6/10/25, 11:17 AM

it did not block the request. it threw an error.

Sam•6/10/25, 11:18 AM

You can try this instead if you want to fallback to text.

.then(r => {
  try { r.json() } catch(e) { r.text() }
})

.then(r => {
  try { r.json() } catch(e) { r.text() }
})

whoamiOP•6/10/25, 11:28 AM

but json is my design.

curl

curl

gives

json

json

correctly.@Sam

ATXOgre•6/10/25, 2:10 PM

A 522 error isn't Cloudflare blocking a request, it is a failure of Cloudflare to successfully connect to the origin server. https://developers.cloudflare.com/support/troubleshooting/http-status-codes/cloudflare-5xx-errors/error-522/

The response of the 522 from Cloudflare reporting the error is not json formatted, hence the suggestion from @Sam to display the error correctly.

As to why the error occurred, review the linked article to troubleshoot the connection issue tot he origin.

Cloudflare Docs

Error 522

Error 522 occurs when Cloudflare times out contacting the origin web server.

AATXOgre A 522 error isn't Cloudflare blocking a request, it is a failure of Cloudflare t...

whoamiOP•6/11/25, 4:17 AM

thank u. but i still can't fix it. there are so many troubles. for example:

whoamiOP•6/11/25, 4:18 AM

```
next build
```
```
next build
```
always failed for it always invoke fetch, which may not readyit always invoke fetch, which may not ready

whoamiOP•6/11/25, 4:20 AM

```
logs
```
```
logs
```
on cloudflare workercloudflare worker tells me my url is like https://host//api/searchhttps://host//api/search, but in actually, i didnot add extra
```
/
```
```
/
```
in url

whoamiOP•6/11/25, 5:05 AM

have to say, nextjs app routerapp router is hard to use

Sam•6/11/25, 9:12 AM

test your JSON in a JSON formatter like jsonformatter.org to see if it's actually valid

SSam test your JSON in a JSON formatter like jsonformatter.org to see if it's actuall...

whoamiOP•6/12/25, 12:40 PM

the api is designed to return

json

json

, but the fetch request is failed for worker calling itselfworker calling itself.

whoamiOP•6/12/25, 12:42 PM

the error code is 522, i am reading the related document, it is about the Mechanism of cloudflareMechanism of cloudflare.

cloudflare will block request from client?

Similar Threads

Similar Threads

Similar Threads