从 react native 调用 Elastic Beanstalk 服务答案

【问题标题】：Call an Elastic Beanstalk Service from react native从 react native 调用 Elastic Beanstalk 服务
【发布时间】：2025-11-23 20:00:01
【问题描述】：

我创建了一个 Elastic Beanstalk 服务，并且可以使用 ebopen 在我的浏览器中打开它。

但是，当我将 URL 放入我的 React Native 代码以便向我的服务发出获取请求时，我收到以下错误：

TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (fetch.js:441)
at XMLHttpRequest.dispatchEvent (event-target.js:172)
at XMLHttpRequest.setReadyState (XMLHttpRequest.js:567)
at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:397)
at XMLHttpRequest.js:503
at RCTDeviceEventEmitter.emit (EventEmitter.js:179)
at MessageQueue.__callFunction (MessageQueue.js:351)
at MessageQueue.js:116
at MessageQueue.__guardSafe (MessageQueue.js:314)
at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:115)

我的代码如下所示：

class IntroScreen extends React.Component {
sendDataToBackend = async () => {
 fetch('https://<URL>').then(function(response) {
    if (!response.ok) {
        console.log(response.statusText);
    }
    return response;
}).then(function(response) {
    console.log("ok");
}).catch(function(error) {
    console.log(error);
});
}

render() {

return (

    <View style={tutorialStyle.buttonContainer}>
      <Button
        title=">"
        color="orange"
        height="40"
        onPress={() => this.sendDataToBackend()}
      />
    </View>
);
}
}

【问题讨论】：

标签： react-native amazon-elastic-beanstalk

【解决方案1】：

是否从与 EB 服务相同的来源向客户端提供 React 本机代码？

如果不是，您得到的错误可能是由浏览器引起的，它经常限制这一点：Cross Origin Resource Sharing (CORS)。要允许它，您必须更改 Elastic Beanstalk (EB) 服务的标头。

根据您的 EB 操作系统（Linux 或 Windows）和 Web 服务器，您可以相应地设置服务应用程序的标头以允许跨源调用。

Here is an example 为使用 Elastic Beanstalk 的 Apache Web 服务器上的容器化设置它的方式。 Here is a question 展示了如何允许 cors 用于弹性 beanstalk nginx 安装。

如果您认为 cors 是导致错误的原因，您可以尝试通过更多搜索来找到帮助或解决方案。或者，您可以使用您的特定操作系统和应用程序设置信息（哪个操作系统、您用于服务的应用程序框架、弹性 beanstalk 细节（负载平衡与否等））创建一个新问题，我们可以尝试并指导您修复cors的最佳方法。您提供的越详细，我们就能越好地帮助您。

【讨论】：