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

Question

我正在尝试使用反应组件中的 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”，在 res.header 部分中设置标题而不是标题，添加“Access-Control-Allow-Origin”和相关标题我的 axios 请求等等。我不确定如何解决这个问题。

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

Answer 1

安装 cors middleware at npm

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

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

app.use(cors());