ReactJS: TypeError: Не удалось получить (не связано с CORS) - PullRequest
Новая
       13

ReactJS: TypeError: Не удалось получить (не связано с CORS)

0 голосов
/ 19 сентября 2018

Я пытаюсь выполнить простой запрос на получение с использованием библиотеки Fetch в React.

У меня есть следующий код (сокращенно для краткости) 

class App extends Component {
 constructor(props) {
   super(props);
     this.state = {
       username: "",
       password: "",
       stories: [],
       isLoggedIn: false
      };
    }

   getAllStories = async () => {
      let res = await fetch(storiesAPI, {header ('Access-Control-Allow-Origin: *')})
     let json = await res.json()
     await this.setState({stories: json})
     console.log(this.state.stories) 
    }

componentDidMount (){
   if (localStorage.token) {
    this.setState({
    isLoggedIn: true
  });
  } else {
    this.setState({
    isLoggedIn: false
  });
  }
  this.getAllStories();
 }

 render() {
  return (
    <div>
       <h1>Hi</h1>
    </div>
    )
  }

  export default App;

Как только компонент монтируется, яполучить ошибку при загрузке, которую я изначально думал из-за ошибки CORS,

picture of error

, поскольку в настоящее время мой файл server.js выглядит так:

const express = require('express')
const parser = require('body-parser')
const cors = require('cors')
const passport = require('./config/passport')()


const app = express()
  var corsOptions = {
  origin: "*",
  optionsSuccessStatus: 200 // some legacy 
  browsers (IE11, various SmartTVs) choke on 204
  };

app.set('port', process.env.PORT || 4000)
app.use(cors(corsOptions));
app.use(parser.json())
app.use(passport.initialize())


app.use(require('./routes/index'))

app.listen(app.get('port'), () => {
 console.log('Server listening on port ' + 
app.get('port'))
})

Я думал, что все делал правильно, но вот что я попробовал:

1.fetch заголовки из let res = await fetch(storiesAPI, {header ('Access-Control-Allow-Origin: *')}), чтобы разрешить res = await fetch (StoriesAPI, {учетные данные: "тот же источник"})

Удаление опции CORS

3. Добавление прокси-сервера в отношении поста переполнения стека

...