Question

class App extends Component {
constructor() {
  super()
  this.state = {
      character: ''
  }
}

componentDidMount(){
 fetch("https://swapi.co/api/people/1", { mode: 'no-cors'})
 .then(blob => blob.json())
 .then(data => {
   this.setState({
     character : data.name
   })
 })
 .catch(e => {
   console.log(e);
   return e;
 });
}

render() {
   return (
       <div>
           {this.state.character}
       </div>
   )
}
}

我遇到此错误语法错误：输入意外结束我正在尝试从API https://swapi.co/api/people/1获取数据预期的输出是一个名称= Luke Skywalker

Answer 1

快速修复：

CORS Everywhere Mozilla FireFox的插件

Allow CORS: Access-Control-Allow-Origin Google Chrome扩展程序

在浏览器启动后只需激活此扩展名即可。

取决于WebAPi权限： 如果未在API中将CORS设置/限制为same-origin，则发送如下的Header

fetch(url, {
        method: 'GET',
        mode: 'cors',
        headers: {
        'Content-Type': 'application/json',
      },
    })
 .then(response => response.json());

请注意mode: 'cors'与cross origin resource sharing相反。如果不确定WebApi，请尝试一下。

如何解决跨域读取阻止（CORB）的问题并在React中获取api

1 个答案: