为何HTTP协议下Fetch POST可访问远程数据库，HTTPS却失败？

针对你遇到的HTTPS环境下CORS请求失败问题，以下是具体的修复步骤：

1. 移除前端请求中的无效CORS头 #

Access-Control-Allow-Origin是后端返回的响应头，前端请求时添加这个头没有任何作用，反而可能干扰请求，直接删除：

async postData() {
  let url = 'https://www.example.com:3000/markers/'
  let 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))
}

2. 修正后端CORS配置的Origin范围 #

当前后端配置的origin: 'https://www.example.com:3000'不匹配实际前端源：如果前端部署在https://www.example.com（默认HTTPS端口443），前后端端口不同属于不同源，需要调整允许的Origin：

生产环境（固定前端源） #

// CORS
const corsOptions = {
    // 前端实际域名，不带3000端口
    origin: 'https://www.example.com',
    credentials: false,
}
app.use(cors(corsOptions));

开发+生产兼容（方便本地调试） #

const allowedOrigins = [
  'https://www.example.com',
  'http://localhost:8080', // 本地Vue开发默认端口，根据你的实际情况修改
  'http://127.0.0.1:8080'
];

const corsOptions = {
  origin: function (origin, callback) {
    // 允许无origin的请求（如curl）或在白名单内的源
    if (!origin || allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  },
  credentials: false
}
app.use(cors(corsOptions));

3. 配置Express支持HTTPS（或用Nginx反向代理） #

你当前的Express是HTTP服务器，但前端用HTTPS请求https://www.example.com:3000会导致连接失败，浏览器直接报CORS错误（本质是连接失败）。有两种解决方案：

方案1：直接给Express配置HTTPS证书 #

const express = require('express')
const mongoose = require('mongoose')
const cors = require('cors');
const bodyParser = require('body-parser');
// 引入HTTPS和文件模块
const https = require('https');
const fs = require('fs');

const app = express()
// ... 保留其他中间件配置

// 加载SSL证书（替换为你的证书路径）
const options = {
  key: fs.readFileSync('/path/to/your/private-key.pem'),
  cert: fs.readFileSync('/path/to/your/certificate.pem')
};

// 用HTTPS启动服务器，替换原有的app.listen
https.createServer(options, app).listen(3000, () => console.log('HTTPS Server started on port 3000!'))

方案2：用Nginx反向代理（生产环境更推荐） #

生产环境一般通过Nginx处理HTTPS，再转发给本地的Express（HTTP），配置示例：

server {
    listen 443 ssl;
    server_name www.example.com;

    ssl_certificate /path/to/your/certificate.pem;
    ssl_certificate_key /path/to/your/private-key.pem;

    location /markers {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

此时前端请求可改为https://www.example.com/markers/（无需加3000端口），CORS配置保持正常即可。

4. 修复后端路由的重复响应问题 #

后端路由中res.end()是多余的，res.status().json()已经自动结束响应，重复调用会导致异常，直接删除：

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({
        // 你的数据
    })
    try {
        const newMarker = await marker.save()
        res.status(201).json(newMarker)
    } catch (err) {
        res.status(400).json({ message: err.message })
    }
    // 移除 res.end();
})

内容的提问来源于stack exchange，提问作者di0genes