从 React 调用 Azure 函数时出现错误 500 内部服务器错误答案

【问题标题】：Error 500 Internal Server error when calling an Azure Function from React从 React 调用 Azure 函数时出现错误 500 内部服务器错误
【发布时间】：2020-02-26 18:48:12
【问题描述】：

当我从 React 调用我的 Azure 函数时，它返回 500 内部服务器错误。从 Postman 尝试了同样的事情，它工作正常。

我来自 React 的电话：

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

sendRestRequest 方法：

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);
      }
    });
});

浏览器错误：

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)

【问题讨论】：

你的 react 应用程序和函数是否都部署在某个地方？在if (error) 中输入console.log 并注销res.body，看看您是否收到任何关于为什么获得500 的消息。
res.body 返回 null

标签： reactjs http azure-functions

【解决方案1】：

您需要为正在运行的 azure 函数启用 CORS。

跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头告诉浏览器让在一个来源运行的 Web 应用程序可以访问来自不同来源的选定资源。

更多信息来自官方文档here。

要从 azure 门户启用 CORS，请遵循此答案 here。

为本地功能测试启用 CORS here。

【讨论】：