Cors原点阻止了对React和Axios的飞行前请求

时间:2018-10-05 22:47:47

标签: reactjs cors axios

以下几行是我的代码:

import React, { Component } from 'react';
import axios from "axios";

import './App.css';

import UserForm from "./components/UserForm";

const token = 'Bearer (API Token Goes Here)';

axios.defaults.headers.common['Authorization'] = token;

axios.defaults.headers.common['Access-Control-Allow-Headers'] = 'Content-Type';
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';


class App extends Component {

  getUser = (e) => {

    e.preventDefault();
    const user = e.target.elements.username.value;

    axios.get(`https://api.clashofclans.com/v1/players/${user}`)
    .then((res) => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">

          <h1 className="App-title">Clash of Clans API</h1>
        </header>
        <UserForm getUser={this.getUser}/>
      </div>
    );
  }
}

export default App;

我在控制台中遇到的错误:

  

SEC7123:[CORS]原点“ http://localhost:3000”阻止了预检   请求,其中请求标头“ Access-Control-Allow-Headers”不是   出现在Access-Control-Allow-Headers响应标头列表中   跨域请求发送到“ https://api.clashofclans.com/v1/players/”。

0 个答案:

没有答案