ReactJS：没有带有XMLHttpRequest的“Access-Control-Allow-Origin”标头

Question

下面的代码给出了下一个错误。我已经设置了标题。我发现问题出在CORS上但是找不到如何使它工作。在评论中，我试图用axios发送请求，但是在请求之下是使用XMLHttpRequest进行的，我确实在处理cors。

import * as React from 'react';
import GoogleLogin from 'react-google-login';
//import axios from 'axios';

export default class GoogleAuth extends React.Component<{}, {}>{
  constructor(props: {}){
    super(props);

    this.handleResponse = this.handleResponse.bind(this);
  }

  handleResponse(response){
    console.log(response);
    console.log(response.googleId);

    //if(response.googleId){
      // let config = {
      //   headers: {
      //     'Access-Control-Allow-Origin': '*',
      //     'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
      //   },
      //
      // };
      //
      // axios.get('https://picasaweb.google.com/data/feed/api/user/' + response.googleId + '?kind=album&access=public', config)
      // .then(function(response2){
      //   console.log(response2);
      // })
      // .catch(function(error){
      //   console.log(error);
      // });

    //}

    let xhttp = new XMLHttpRequest();
    xhttp.setRequestHeader('Access-Control-Allow-Headers', '*');

    xhttp.onreadystatechange = function(e){
        console.log(this);
        if(xhttp.readyState === 4 && xhttp.status === 200){
          console.log(this.response);
        }
    };

    xhttp.open('get', 'https://picasaweb.google.com/data/feed/api/user/' + response.googleId + '?kind=album&access=public',true);
    xhttp.send();
  }

  render(){
    return(
      <GoogleLogin
        clientId="890876118034-jra8v99vqbgf3e0u5eu29lit2bm66lqi.apps.googleusercontent.com"
        buttonText="Login"
        onSuccess={this.handleResponse}
        onFailure={this.handleResponse}
      />
    );
  }
}

Answer 1

您需要在Google开发者帐户中添加白名单标题“http://localhost:3000”。

或

尝试更改ajax调用中的dataType: 'jsonp'。

Answer 2

最简单的方法是，由于您无法控制服务器发送的数据，因此使用cors-anywhere。它将CORS添加到从服务器发送的数据中。

有一个预先配置的heroku应用程序，可用于此link的任何地方。

您可以将您的axios呼叫更改为

  axios.get('https://cors-anywhere.herokuapp.com/https://picasaweb.google.com/data/feed/api/user/' + response.googleId + '?kind=album&access=public', config)
   .then(function(response2){
     console.log(response2);
   })
   .catch(function(error){
     console.log(error);
   });

这样您就可以获得响应的CORS标头。