Question

我正在尝试通过一个简单的react应用访问AWS API，但出现了CORS错误。我要做的就是访问数据，然后显示它并允许用户对其进行组织。当我将数据的网址插入浏览器时，该信息将完美显示。

我的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请求这样做。

Answer 1

相同来源仅对于具有相同来源的资产请求成功，所有其他请求将被拒绝。

cors将允许请求具有相同来源和其他来源的资产，并返回适当的CORs标头。

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

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

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

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

Answer 2

该API似乎是允许的，并以Access-Control-Allow-Origin作为响应：*

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

您可以像下面那样更改代码

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

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

在React中的AWS API上的GET请求

2 个答案: