使用JS发送POST请求遭遇CORS错误的解决方法咨询

你遇到的是浏览器同源策略引发的跨域拦截，核心原因是后端服务未返回Access-Control-Allow-Origin响应头，以下是几种可行的解决方式：

1. 后端配置CORS（推荐生产环境使用） #

这是标准且合规的解决方案，需要在后端服务中添加CORS相关响应头：

• 必须返回Access-Control-Allow-Origin头，值可以是你的前端域名（比如https://your-frontend.com），临时场景（无认证需求）也可以用*（生产环境不建议长期用*，若后续需要携带Cookie会失效）
• 由于你的请求是带Content-Type: application/json的POST，浏览器会先发送OPTIONS预请求，后端需要正确响应该请求，返回Access-Control-Allow-Methods（允许的请求方法，如POST、OPTIONS）和Access-Control-Allow-Headers（允许的请求头，如Content-Type、Accept）

常见后端框架配置示例： #

Node.js/Express

const express = require('express');
const app = express();

// 全局CORS中间件
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
  // 快速响应OPTIONS预请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

// 你的/test接口
app.post('/test', express.json(), (req, res) => {
  res.json({ status: 'success', data: req.body });
});

app.listen(8090);

Java/Spring Boot

在接口类或方法上添加@CrossOrigin注解：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.Map;

@RestController
@CrossOrigin(origins = "*", methods = {org.springframework.web.bind.annotation.RequestMethod.POST, org.springframework.web.bind.annotation.RequestMethod.OPTIONS}, allowedHeaders = {"Content-Type", "Accept"})
public class TestController {
    @PostMapping("/test")
    public Object test(@RequestBody Map<String, Object> requestBody) {
        return Map.of("status", "success", "data", requestBody);
    }
}

Python/Flask

使用flask-cors扩展简化配置：

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 允许所有域名跨域，生产环境替换为具体前端域名
CORS(app, origins="*")

@app.route('/test', methods=['POST', 'OPTIONS'])
def test():
    if request.method == 'OPTIONS':
        return '', 200
    data = request.get_json()
    return jsonify({"status": "success", "data": data})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8090)

2. 前端临时设置no-cors模式（仅适用于无需处理响应的场景） #

按照错误提示，修改fetch请求的mode为no-cors，但这种方式下浏览器会返回不透明响应（opaque response），无法调用response.json()解析数据，仅适合日志上报这类不需要获取响应的场景：

const response = await fetch("http://172.18.6.249:8090/test", {
    method: 'POST',
    mode: 'no-cors', // 添加该配置
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: `{
 "Id": 78912,
 "Customer": "Jason Sweet",
 "Quantity": 1,
 "Price": 18.00
}`,
});
// 注意：此处无法调用response.json()，会触发错误

3. 开发阶段使用前端代理 #

本地开发时，可通过前端框架的代理功能将请求转发到后端，规避跨域限制：

Vue项目（修改vue.config.js）

module.exports = {
  devServer: {
    proxy: {
      '/test': {
        target: 'http://172.18.6.249:8090',
        changeOrigin: true
      }
    }
  }
}

之后前端请求改为fetch("/test", ...)即可

React项目（新增setupProxy.js，需先安装http-proxy-middleware）

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/test',
    createProxyMiddleware({
      target: 'http://172.18.6.249:8090',
      changeOrigin: true,
    })
  );
};

前端请求同样改为fetch("/test", ...)

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