Ooker•9mo ago

Why does `res.text()` not work inside `useEffect()`?

On islands/test.tsx I have:

import { useEffect } from "preact/hooks";
export default function Test(){ 
    fetch('https://example.com')
    .then(res => res.text())
    .then(d => console.log(d))
    
    useEffect(() => {        
        fetch('https://example.com')
        .then(res => res.text())
        .then(d => console.log(d))     
    })
    return 'hi'
}

import { useEffect } from "preact/hooks";
export default function Test(){ 
    fetch('https://example.com')
    .then(res => res.text())
    .then(d => console.log(d))
    
    useEffect(() => {        
        fetch('https://example.com')
        .then(res => res.text())
        .then(d => console.log(d))     
    })
    return 'hi'
}

The data returns fine in the server's console (the part outside the useEffect() hook), but it doesn't show up in the client's console. However if I change the fetch function to:

fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(res => res.json())
.then(d => console.log(d))

fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(res => res.json())
.then(d => console.log(d))

then it shows on both sides. Why is that the case? (Also asked on Stack Overflow).

Stack Overflow

Why does res.text() not work inside useEffect()?

On islands/test.tsx I have: import { useEffect } from "preact/hooks"; export default function Test(){ fetch('https://example.com') .then(res => res.text()) .then(d => c...

6 Replies

marvinh.•9mo ago

Check the browser console, there are some big red error messages. The security model in browsers is different than on the server in regards to when you're allowed to fetch from other sites. When you do a network request from within JavaScript in the browser an Origin header is added to the request. The site https://example.com blocks requests coming from localhost, when the origin header points to that which is why you're seeing this error. This security feature is called CORS in browsers and you can read more about it here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

OokerOP•9mo ago

interesting. I turnoff the error log in my browser console, so I didn't see that. I also don't see the error is there in the server console. MDN says:

CORS failures result in errors but for security reasons, specifics about the error are not available to JavaScript. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.

What are those security reasons?

OokerOP•9mo ago

I ask this question because I have the same problem when trying to POST to this endpoint (the app is also mine):

https://quacau.deno.dev/kv?key=%C4%90u%C3%B4i+r%C3%BAt+g%E1%BB%8Dn%2CC1SHZ3

https://quacau.deno.dev/kv?key=%C4%90u%C3%B4i+r%C3%BAt+g%E1%BB%8Dn%2CC1SHZ3

I create the API by using denoland/kv_api I follow Dealing with CORS | Fresh docs but none of the script solves that. Why is that?

GitHub

GitHub - denoland/kv_api: WORK IN PROGRESS: Attach a flexible REST ...

WORK IN PROGRESS: Attach a flexible REST API to your Deno web app to manage data in Deno KV - denoland/kv_api

Dealing with CORS | Fresh docs

CORS enabling routes in your Fresh project.

marvinh.•9mo ago

I also don't see the error is there in the server console.

CORS is primarly a security feature for the browser, not the server. When you make a request in the browser you'll also send along your cookies with it. This means if you would have no restrictions it would be quite easy to steal your login cookies for example. That's why CORS exists. Both the browser and the server must agree that they're allowed to conncet to each other first so that your cookies are not accidentally leaked. This is not a problem on the server, so CORS on the server adds nothing of value.

What are those security reasons?

I'm fuzzy on the details, but that's the way browsers work.

OokerOP•9mo ago

Thanks. Do you know how to fix this?

OokerOP•9mo ago

FYI: What are the reasons for CORS failure errors to not be available to JS?

Information Security Stack Exchange

What are the reasons for CORS failure errors to not be available to...

From Cross-Origin Resource Sharing (CORS) - HTTP | MDN: CORS failures result in errors but for security reasons, specifics about the error are not available to JavaScript. All the code knows is th...

Why does `res.text()` not work inside `useEffect()`?

Did you find this page helpful?