首页 > 解决方案 > ReactJS:TypeError:无法获取(与CORS无关)

问题描述

我正在尝试使用 React 中的 Fetch 库进行简单的获取请求。

我有以下代码(为简洁起见缩短)

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 错误,

错误图片

因为目前我的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 headers from let res = await fetch(storiesAPI, {header ('Access-Control-Allow-Origin: *')})to let res = await fetch(storiesAPI, { credentials: "same-origin" })

  1. 删除 CORS 选项

3.添加proxyurl引用堆栈溢出帖子

标签: javascriptreactjscorsfetch

解决方案


推荐阅读