CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionfetch-api
Ben
Ben

Reputation: 169

Why is the response body empty (0 bytes on network tab) for this request? Is it to do with this being an extension?

When I use the fetch API (Or xmlhttprequest) I get a 0 byte response. Here is a sample of my code:

    fetch("https://myurl", {
      method: "POST",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({content: content})
      }).then(function(res){  return res.text()}).then(function(res){ return cb(res);});

In the network tab, and in the console.log(res) in the callback, the response is empty. I should note that the response is including a CORS response specifying my chrome extension (which is making the request)

Access-Control-Allow-Origin: chrome-extension://asdjkljuewyrjkhighqwend

When I use the requests library (python) and make the same request (copying and pasting the body of the request) I get a valid json response.

resp = requests.post("https://myurl", json=data)
resp.json() ->> {content}

Additionally, when I inspect the server after the Fetch requests, I can see that it happily responded with the json to the request, but something on the browser seems to be blocking it from getting through.

Upvotes: 0

Views: 3878

Answers (2)

DanteDiaze
DanteDiaze

Reputation: 128

You need to move all XHR requests to the background part of your extension. Chrome no longer accepts content scripts requests.

You can use runtime.sendMessage to send messages to a background process.

chrome.runtime.sendMessage(myMessageObject, async response => {
  // Here is the response returned by the background process
});

And here is how to receive messages from the background perspective.

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {

  return true
})

Upvotes: 3

Daniel
Daniel

Reputation: 571

I believe you're indeed looking at a CORS issue. Try including the following headers in the response from your server:

Access-Control-Allow-Origin: * // you already hve this one Access-Control-Allow-Headers: Content-Type Access-Control-Allow-Methods: GET, PUT, POST, OPTIONS

Upvotes: -1

Related Questions