fetch() works in Extension but fails in Chrome Console/Snippet

Question

My Chrome Extension performs a get request which works fine. Because testing is faster with snippets, I want to do the exact same thing in the Chrome Console or in the Chrome Snippets. Minimal example:

fetch(url, {
    method: "GET"
}).then(response => response.text())
  .then(html => console.log(html))
  .catch(error => console.log(error))

Unfortunately, there I only get

TypeError: Failed to fetch for the error and

Failed to load resource: net::ERR_FAILED in Chrome's inline error marker

In my Chrome Extension I ran into a CORS issue so what I did in my AWS Lambda function was to set the headers to

const headers = {
    'Content-Type': 'application/json',
    "Access-Control-Allow-Headers" : "Content-Type",
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Credentials" : true
};

so I suppose CORS isn't the problem here. But I can't seem to figure out as to what differences it could make to have the requests run in the Extension vs. in the console/snippets. What could I be missing here?

I also do not see the request in AWS CloudWatch so I suppose it doesn't even leave my machine. I am testing on a Chrome User that has 0 extensions installed, same happens in incognito

To circle out any issues with my server I have also inserted the examples from https://lockevn.medium.com/snippet-to-fetch-remote-rest-api-and-display-in-console-of-chrome-devtool-6896a7cd6041

async function testGet() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    console.log(await response.json())
}

async function testPost() {
    let r = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            lockevn: 1
        }),
    })
    console.log(await r.json())
}


testGet()

testPost()

Chrome's Network tab shows the request as stalled

The linked 'explanation' gives

Queueing: The browser queues requests when:

There are higher priority requests.
There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.
The browser is briefly allocating space in the disk cache

Stalled: The request could be stalled for any of the reasons described in Queueing.

Higher priority seems odd, 6 connections can't be the issue either since I have restarted my browser before testing, and the disk cache issue doesn't sound like the problem either. I'm not macOS with no anti virus

user_2161301 · Answer

I managed to find the issue. In order to avoid potentially privileging my requests by opening the Chrome Developer Console in my AWS dashboard tab, I have created a new tab (chrome://new-tab-page/) and performed the requests in the console. This returned the errors described.

When I have updated my question with the example code I wanted to confirm if it was running before asking someone to try it if it works on their machine. For quick runtime-validation I opened the Console in the Stackoverflow tab and it worked. I only wanted to check if the code can be interpreted but it turned out to actually return a result. The same is valid for my AWS instance, if I run it on a https website it works fine. No idea why this is not documented but "disk cache" is mentioned as a potential error.

tldr don't open Chrome Console in new tab for requests in the console, use any website. This may have to do with CORS headers only working if the request doesn't have empty headers to begin with maybe (?)

I specifically avoided using a website console instance for testing because I wanted to prevent potential cookies on the AWS page from doing something that someone else couldn't do on their machine. Good thinking bad result haha

Thank you so much for your comments suggesting the help, much appreciated.

fetch() works in Extension but fails in Chrome Console/Snippet

1 Answers