为什么使用 http 获取 POST 到远程数据库可以工作，但不能使用 https 协议？

Question

我正在使用 VueJS、Nginx、Express 和 MongoDB 开发一个网站。如果我使用 http 协议从本地计算机发出指向远程数据库的 PUT 请求，但当我使用 https 协议从本地计算机或从托管在同一服务器中的远程网页发出请求时，我的后端运行良好后端（使用 https 协议），我收到消息：

跨源请求被阻止：同源策略不允许读取 https://www.example.com:3000/markers/ 处的远程资源。 （原因：CORS请求未成功）

最简单的解决方案应该是使用http（而不是https）协议从网页发布，但显然这不是最好的解决方案。

我的代码的相关部分是：

在我的 VueJS 前端获取 POST：

async postData() {
      let url = 'https://www.example.com:3000/markers/'
      let data = {
        // My data
      }
      await fetch(url, {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
          "Access-Control-Allow-Origin": "*"
        }
      }).then(response => console.log(response.ok))
    }

后端的server.js脚本：

const express = require('express')
const mongoose = require('mongoose')
const cors = require('cors');
bodyParser = require('body-parser');

const app = express()
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use(bodyParser.json({ limit: "50mb" }))
app.use(bodyParser.urlencoded({ limit: "50mb", extended: true, parameterLimit: 50000 }))

// CORS
const corsOptions = {
    origin: 'https://www.example.com:3000',
    credentials: false,
}
app.use(cors(corsOptions));

mongoose.connect('mongodb://127.0.0.1/markers', {})

const db = mongoose.connection
db.on('error', (error) => console.log('ERROR!'))
db.once('open', () => console.log('Connected to DB'))

const markersRouter = require('./routes/markers')
app.use('/markers', markersRouter)

app.listen(3000, () => console.log('Server started!'))

后台路由：

router.post('/', async (req, res) => {
    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
    res.setHeader('Pragma', 'no-cache');
    res.setHeader('Expires', '0');
    const marker = new Marker({
    // My data
    })
    try {
        const newMarker = await marker.save()
        res.status(201).json(newMarker)
    } catch (err) {
        res.status(400).json({ message: err.message })
    }
    res.end();
})

我已经花了两天时间寻找解决方案，但 Mozilla 网页中的 CORS“了解更多”文档对于错误原因确实很笼统。在网上找到的适用于我的具体问题的唯一答案表明了以下几行：

// CORS
const corsOptions = {
    origin: 'https://www.example.com:3000',
    credentials: false,
}
app.use(cors(corsOptions));

我已经将其添加到后端的 server.js 文件中，但没有结果，并且错误仍然相同。

有人可以告诉我如何发出正确的请求以通过 https 向远程数据库发出 fetch POST 请求吗？

祝一切顺利，非常感谢！

Answer 1

app.use(
  cors({
    origin: ["https://www.example.com:3000"],
    credentials: true,
  })
);

尝试使用 true 凭证，或者您也可以在代码中将 SameSite 属性添加为 none

这些会有帮助，你也可以在我们在配置文件中添加代理链接时尝试。

就像在 React 中一样，我们添加了一个代理链接，它有助于重定向到后端。 另外，避免像

https://www.example.com:3000/"

这样写 https url，而是删除最后一个 / 并保持它像

https://www.example.com:3000

这也可能会带来 cors 错误。