在 Express 应用程序中添加参数时出现 CORS 错误

Posted 2023-03-04

【中文标题】在 Express 应用程序中添加参数时出现 CORS 错误

【英文标题】：CORS Error when adding a parameter in an Express app

【发布时间】：2021-02-08 06:50:00

【问题描述】：

我完全不明白为什么这不起作用。

我有一个托管在 Heroku 上的快速应用程序，基本上可以做到这一点

var urlMetadata = require('url-metadata')

var express = require('express')

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

app.use(cors())

app.get('/products', function (req, res, next) 
    res.json(
        msg: 'This is CORS-enabled for all origins!'
    )
)

app.get('/prod/:url', function (req, res, next) 

    var url = decodeURI(req.params.url);

    urlMetadata(url).then(
        function (metadata) 
            res.json(
                metadata
            );
        ,
        function (error) 
            console.log(error)
        )
)

客户端

    axios
      .get(`https://git.heroku.com/egosmos-meta.git/prod`, 
        params: 
          url,
        ,
      )
      .then((response) => 
        console.log(response);
      );

    axios
      .get(`https://egosmos-meta.herokuapp.com/products`)
      .then((response) => 
        console.log(response);
      );

这就是我得到的

所以/products 可以工作，但/prod/:url 会引发 CORS 错误

感谢您的帮助！

【参考方案1】：

Axios 中的params 定义了查询参数，例如?url=http://example.com，但您的Express 应用程序需要route parameter。

将您的客户端代码更改为以下内容

axios.get(`https://git.heroku.com/egosmos-meta.git/prod/$encodeURIComponent(url)`)

您收到 CORS 错误，因为您没有 /prod?url=... 的路由，因此 CORS 中间件没有启动。

【讨论】：

非常感谢您的快速回答。你的解释很有道理，很有用。但不幸的是，它并没有解决我的问题。我想知道怎么了。

@Albrich 请更新您的问题中报告的代码和错误消息/屏幕截图

【参考方案2】：

尝试使用 corsOption..

var cors = require('cors')

var corsOptions = 来源：'https://git.heroku.com', optionsSuccessStatus: 200 // 一些旧版浏览器（IE11、各种 SmartTV）在 204 上阻塞

app.use(cors(corsOptions))

另外，如果为 axios 试试 axios.get(https://git.heroku.com/egosmos-meta.git/prod/$url).then()