Question

访问 React 应用程序中的 API 时出错

2018-03-08

173

javascript reactjs api

这是我在浏览器中访问 API 时收到的错误。错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这是我的 app.js 文件。我基本上是在尝试使用随机引号生成器 API。这是代码。

import React, { Component } from 'react';

import './App.css';
const PATH_BASE='https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en';
class App extends Component {

   getquotes=()=>{
     fetch(`${PATH_BASE}`)
     .then((resp)=>resp.json())
     .then(function(data){
       console.log(data);
     })
     .catch(() => console.log("Can’t access " + PATH_BASE + " response. Blocked by browser?"))


   }
  componentDidMount=()=>{
    this.getquotes()
  }
  render() {
    return (
      <div className="App">
      <h1>Random Quote </h1>
      </div>
    );
  }
}

export default App;

Answer 1

就像 epascarello 所说的那样，托管资源的服务器需要启用 CORS。您可以在客户端执行的操作（可能也是您正在考虑的操作）是将获取模式设置为 CORS（尽管我认为这是默认设置）：

    fetch(request, {mode: 'cors'});

但是，这仍然需要服务器启用 CORS，并允许您的域请求资源。

查看 CORS 文档，以及这个解释同源策略的精彩 Udacity 视频。

您也可以在客户端使用 no-cors 模式，但这只会给您一个不透明的响应

import React, { Component } from 'react';

import './App.css';
const PATH_BASE='https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en';
class App extends Component {

   getquotes=()=>{
     fetch(`${PATH_BASE}`,{mode: 'no-cors'})
     .then((resp)=>resp.json())
     .then(function(data){
       console.log(data);
     })
     .catch(() => console.log("Can’t access " + PATH_BASE + " response. Blocked by browser?"))


   }
  componentDidMount=()=>{
    this.getquotes()
  }
  render() {
    return (
      <div className="App">
      <h1>Random Quote </h1>
      </div>
    );
  }
}

export default App;