1

When I call my Azure Function from React, it returns a 500 Internal server error. Tried the same thing from Postman and it works fine.

My call from React:

componentDidMount() {
    const obj = { name: 'test.jpg' };
    sendRestRequest('GET', `${URL_API_AI_1}`, obj)
  }

sendRestRequest method:

import request from 'superagent';

export const sendRestRequest = (requestAction, url, body = '') => new Promise((resolve, reject) => {
  request(requestAction, url)
    .send(body)
    .end((error, res) => {
      if (error) {
        reject(error);
      } else {
        resolve(res.body);
      }
    });
});

Browser error:

GET https://"url" 500 (Internal Server Error)
client.js:440 Uncaught (in promise) Error: Internal Server Error
    at Request.<anonymous> (client.js:440)
    at Request.push../node_modules/component-emitter/index.js.Emitter.emit (index.js:140)
    at XMLHttpRequest.xhr.onreadystatechange (client.js:732)
Xavi Andreu
  • 101
  • 2
  • 12
  • Are your react app and function both deployed somewhere? Put a `console.log` in the `if (error)` and log out the `res.body` to see if you get any message as to why you got a 500. – Chris Oct 31 '19 at 13:19
  • res.body returns null – Xavi Andreu Nov 04 '19 at 08:57

1 Answers1

1

You would need to enable CORS for your running azure function.

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

More info on this from official docs here.

To enable CORS from azure portal follow this answer here.

To enable CORS for local function testing here.

Rithin Chalumuri
  • 1,739
  • 7
  • 19