在 React 中对 AWS API 的 GET 请求答案

【问题标题】：GET request on an AWS API in React在 React 中对 AWS API 的 GET 请求
【发布时间】：2018-12-09 05:03:54
【问题描述】：

我正在尝试通过一个简单的 React 应用程序访问 AWS API，但遇到了 CORS 错误。我要做的就是访问数据，然后显示它并允许用户组织它。当我将数据的 url 插入浏览器时，信息显示完美。

我的 API 文件如下所示：

const beerURL = "https://s3.amazonaws.com/....";

//Grab all the data from the API so we can use it in our application
export default {
searchBeer: () => {
   return fetch(beerURL)
 }
}

在我的 App.js 文件中，我这样调用：

import API from "./utils/API";

class App extends Component {

constructor(props) {
  super(props);
  this.state = {
    beer: []
  }
}

componentDidMount() {
  this.loadData();
}

loadData = () => {
  Promise.all([
    API.searchBeer()
  ])
  .then(response => {
    this.setState({ beer: response });
  })

}

render() {
  ...

}

我需要为此设置 CORS 服务器吗？我不明白为什么我需要为一个简单的 GET 请求这样做。

【问题讨论】：

请尝试禁用 chrome 网络安全。当您尝试访问跨域网址时。
@RinkeshGolwala，我在另一个浏览器中尝试过，但仍然遇到同样的问题
是的。也是出于同样的原因。
这可能有助于moxio.com/blog/12/…
你能展示你的 API.js 吗？

标签： reactjs api amazon-web-services cors

【解决方案1】：

same-origin 仅对同源资产的请求成功，所有其他请求将被拒绝。

cors 将允许对同一来源和其他来源的资产的请求，这些资产返回适当的 COR 标头。

cors-with-forced-preflight 将始终在发出实际请求之前执行预检检查。

no-cors 旨在向没有 CORS 标头的其他来源发出请求并导致不透明的响应，但如上所述，目前在窗口全局范围内这是不可能的。

要定义模式，请在获取请求中添加一个选项对象作为第二个参数，并在该对象中定义模式：

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    console.log('Request successful', text);
  })
  .catch(function(error) {
    log('Request failed', error)
  });

【讨论】：

这仍然没有解决问题。我一直在使用 chrome 插件运行，但即使它已部署，我也无法访问 API。我是第三方用户

【解决方案2】：

该 API 似乎是允许的，并以 Access-Control-Allow-Origin:* 进行响应

我还没有弄清楚是什么导致了您的问题，但我认为这不仅仅是 fetch API。

您可以像下面这样更改您的代码

const beerURL = "https://s3.amazonaws.com/....";

fetch(beerURL)
   .then( response => response.json() )
   .then( data => console.log(data) )

【讨论】：