Search code examples
javascriptazurefetch

Why do I get an empty response from fetch call?

I have Azure function app written in python. App works in azure editor fine and in calling request from python also fine. But when I want to call it from client side javascript (from my react app) I get empty response

I call it in this way:

    fetch("https://xxxxx.azurewebsites.net/api/testtrigger?", {
        mode: 'no-cors',
        method: 'GET'
    }).then(response => response.text()).then((response) => {
        console.log(response)
    })

The no-cors is there because I test it on localhost.

Function code looks like this:

import logging

import azure.functions as func

def main(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Function called')
    return func.HttpResponse("Its working")

Azure shows that function is being called, but is there any reason I missed why this should't work? I receive response but its empty, here is response json:

     Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, …}
body: (...)bodyUsed: falseheaders: Headers[[Prototype]]: Headersappend: ƒ append()delete: ƒ delete()entries: ƒ entries()forEach: ƒ forEach()get: ƒ ()has: ƒ has()keys: ƒ keys()set: ƒ ()values: ƒ values()constructor: ƒ Headers()Symbol(Symbol.iterator): ƒ entries()Symbol(Symbol.toStringTag): "Headers"[[Prototype]]: Objectok: falseredirected: falsestatus: 0statusText: ""type: "opaque"url: ""[[Prototype]]: Response

This code in python works fine:

import requests
x = requests.get('https://xxxxx.azurewebsites.net/api/testtrigger')
print(x.text)
Solution

  • no-cors is an explicit directive to fetch to tell it not to do anything that requires the server to use CORS to grant permission.

    Reading the response body requires permission.

    Since you said no-cors you get an empty body instead of the data the server responded with.