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

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 ，手动将 header 模式设置为“cors”而不是“no-cors”，在 res.header 部分中 setHeader 而不是 header ，将“Access-Control-Allow-Origin”和相关 header 添加到我的 axios 请求等等。我不确定如何解决这个问题。

当我不在浏览器中禁用跨源限制时，我只收到一个空字符串响应，除了有时“内容类型”之外没有设置任何 header ，并且我没有收到任何错误消息告诉我任何信息。它会使用完全相同的状态代码，就像它正确响应一样。

Answer 1

安装cors middleware at npm

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

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

app.use(cors());