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

Posted 2023-02-22

【中文标题】使用 express 配置 CORS 并使用 axios 在前端发出请求

【英文标题】：Configuring CORS with express and making requests on the front end with axios

【发布时间】：2018-07-28 16:08:44

【问题描述】：

我正在尝试使用反应组件中的 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 时，我只会收到一个空字符串响应，除了有时“内容类型”之外没有设置任何标题，并且我没有收到任何错误消息告诉我任何事情。它使用完全相同的状态代码，就好像它正确响应一样。

【问题讨论】：

安装CORS中间件它应该可以工作npm install cors

【参考方案1】：

安装 cors middleware at npm

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

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

app.use(cors());

【讨论】：

好的，我又试了一次，一遍又一遍地刷新页面后，我意识到它确实有效。但是，现在我有一个竞争条件或其他导致 json 对象在 100% 的时间内没有被接收到的东西。你知道是什么原因造成的吗？我是否必须将 cors 中间件配置为异步运行？

不，我认为这不是您的问题，但是您可以设置 cros 中间件。这是相关的文档。 npmjs.com/package/cors