React 组件无法向 Google API 发出请求

Question

我正在尝试构建一个在服务器端使用 Node 和 Express 的 React 应用程序。我在对 Google API 进行 ajax 调用时收到 Cross-Origin Request Blocked 错误。以下是我的 ajax 请求：

    $.ajax({
     url: 
'https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins='+start+'&destinations='+end+'&key=%20'+Key,
     dataType: 'json',
     cache: false,
     crossDomain: true,
     success: function(data) {
       console.log(json);
     }.bind(this),      
     error: function(xhr, status, err) {    
       console.error('https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins='+start+'&destinations='+end+'&key=%20'+Key, status, err.toString());
     }.bind(this)   
   });

网址正确，浏览器正常调用时显示json。

我在我的快递服务器中启用了 https。但这并没有帮助。 我尝试更改数据类型：'jsonp'，但它给出了 parseerror（未调用 jquery）。 jsonp 需要回调，但我的控制不去回调函数，它继续给出解析错误。

我已在 Google API 控制台中创建了所需的凭据。并尝试使用以下脚本：

<script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
<script>
    function start() {
        gapi.load('auth2', function() {
        auth2 = gapi.auth2.init({
        client_id: 'CLIENT_ID.apps.googleusercontent.com',

           });
       });
    }
 </script>

在所有情况下我都会收到以下错误：

跨域请求被阻止：同源策略不允许读取 远程资源在 https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=ORIGIN&destinations=END&key=YOUR_KEY。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

但错误仍然存​​在。有人可以帮我删除这个错误或解析错误（如果是 jsonp 数据类型）。

Answer 1

您不能从一个域向另一个域进行网络调用。由于某些安全原因，浏览器会阻止此操作。

了解CORS

您需要设置一个服务器来与 google api 和您的客户端（浏览器）通信 应该与您的服务器对话以获取 google api 数据。您的服务器将成为访问 google api 的代理。

Answer 2

您尝试访问的 API 不支持这一点，即使有黑客攻击，它也无法可靠地工作。相反，请使用Google Maps JavaScript API 及其Distance Matrix Service。它会为您处理这个问题，您不必担心正确获取服务器请求。

查看 Google 提供的 this example。

这是一个结合使用 React 和距离矩阵服务的示例：

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      origin: '',
      destination: '',
      distance: '',
    };
  }

  componentDidMount() {
    // Some sample data plus a helper for the DistanceMatrixService.
    const origin = new google.maps.LatLng(52.516242, 13.377720);
    const destination = 'Potsdam, Germany';
    const matrix = new google.maps.DistanceMatrixService();
    
    // Get distance from Google API, if server responds, call renderDetails().
    matrix.getDistanceMatrix({
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
      }, 
      this.renderDetails.bind(this)
    );
  }
  
  renderDetails(res, status) {
    // If the request was successfull, fill our state with the distance data.
    if (status == 'OK') {
      this.setState({
        origin: res.originAddresses[0],
        destination: res.destinationAddresses[0],
        distance: res.rows[0].elements[0].distance.text,
      });
    } else {
      console.log(status);
    }
  }

  render() {
    return(
      <div>
        <p>Origin: {this.state.origin}</p>
        <p>Destination: {this.state.destination}</p>
        <p>Distance: {this.state.distance}</p>
      </div>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>

<div id="View"></div>