Question

我正在尝试使用react组件中的axios从我的一个服务器路径获取JSON对象。

这是相关的服务器代码

var express = require('express')
var app = express()

app.use(require('morgan')('combined'))
app.use(require('cookie-parser')())
app.use(require('body-parser').urlencoded({ extended: true }))
app.use(require('express-session')({ secret: 'keyboard cat', resave: true, saveUninitialized: true }))

app.use(passport.initialize())
app.use(passport.session())

app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')

  next()
})

app.get('/',
  function (req, res, next) {
    res.send(req.user)
  }
)
app.listen(process.env.PORT || 8080)

这是我的组件中相关的axios功能请求

 getUser () {
    axios.get('http://localhost:8080/', {mode: 'cors', 'Cache-Control': 'no-cache'})
      .then(res =>
        res.data
      )
      .then(user =>
        this.setState({
          user: user
        })
      )
      .catch(console.error())
  }

如果我在浏览器开发设置中禁用了跨源限制（我收到了正确的JSON对象），则此代码有效，但默认情况下它不起作用。我尝试使用this CORS express middleware，手动将标题模式设置为“cors”而不是“no-cors”，setHeader而不是res.header部分中的标题，添加“Access-Control-Allow-Origin”和我的axios请求的相关标题等等。我不确定如何解决这个问题。

当我没有在浏览器中禁用跨源限制时我只收到一个空字符串响应，除了有时'content-type'之外没有设置标题，我没有收到任何错误消息告诉我任何事情。它使用完全相同的状态代码，就好像它正确响应一样。

Answer 1

安装cors middleware at npm

此代码将启用所有CORS请求。

<form>
  <select id="select">
    <option value=""></option>
    <option value="a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a</option>
    <option value="b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b</option>
  </select>
</form>
<textarea id="output"/>

使用express配置CORS并使用axios在前端发出请求

1 个答案: