在React应用中访问API时出错

Question

Here is the error that I get while accessing an API in my browser . ERROR:

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.

Here is my app.js file.I am basically trying to use random quote generator API.Here is the code.

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

Like epascarello said, the server that hosts the resource needs to have CORS enabled. What you can do on the client side (and probably what you are thinking of) is set the mode of fetch to CORS (although this is the default setting I believe):

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

However this still requires the server to enable CORS as well, and allow your domain to request the resource.

Check out the CORS documentation, and this awesome Udacity video explaining the Same Origin Policy.

You can also use no-cors mode on the client side, but this will just give you an opaque response

 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;