CORS 错误，但仅限于 POST 请求，尽管有 cors 配置（GET 没有问题）

Posted 2023-03-04

技术标签:

【中文标题】CORS 错误，但仅限于 POST 请求，尽管有 cors 配置（GET 没有问题）【英文标题】：CORS error but only on POST request, despite cors config (GET have no issue) 【发布时间】：2020-10-04 00:46:14 【问题描述】：

我使用 nodejs express 服务器。尽管允许主机，但我仍然有一个 CORS 错误

" 请求中不存在“Access-Control-Allow-Origin”标头资源。”

但仅适用于 POST 端点。 “GET”没有问题。我的客户端浏览器允许使用（GET 和 POST）端点：

我的服务器：（在http://serverURL上运行）

var whitelist = ['http://localhost:4200', 'http://someOtherDeployUrl.com']
var corsOptionsDelegate = function (req, callback) 
    var corsOptions;
    if (whitelist.indexOf(req.header('Origin')) !== -1) 
        corsOptions = origin: true // reflect (enable) the requested origin in the CORS response
     else 
        corsOptions = origin: false // disable CORS for this request
    
    corsOptions.methods= "GET,HEAD,PUT,PATCH,POST,DELETE"; 
    callback(null, corsOptions) // callback expects two parameters: error and options



router.post('/score', cors(corsOptionsDelegate), function (req, res, next) 
    ...
    res.status(200).send('Ok');
);

router.get('/scores', cors(corsOptionsDelegate), function (req, res, next) 
    res.status(200).send(scores);
);

客户端（角度 9）：（在 localhost:4200 上运行）

  public saveScore(player, score) 
    console.log("save score")
    let objectObservable = this.http.post("http://serverURL/score", 
      player: player,
      score
    ).subscribe(
      data => console.log('success', data),
      error => console.log('oops', error)
    );

    return objectObservable

  

  public getScores() 
    return this.http.get("http://serverURL/scores");

知道为什么它不起作用吗？

GET 的整个请求/响应：

回复：

Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Origin: http://localhost:4200
Content-Length: 2
Content-Type: application/json; charset=utf-8
Date: Sun, 14 Jun 2020 14:42:35 GMT
Etag: W/"2-l9Fw4VUO7kr8CvBlt4zaMCqXZ0w"
Server: Cowboy
Vary: Origin
Via: 1.1 vegur
X-Powered-By: Express

请求：

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: en,en-US;q=0.9,fr-FR;q=0.8,fr;q=0.7
Connection: keep-alive
DNT: 1
Host: serverUrl
If-None-Match: W/"2-l9Fw4VUO7kr8CvBlt4zaMCqXZ0w"
Origin: http://localhost:4200
Referer: http://localhost:4200/menu
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/83.0.4103.97 Safari/537.36

（失败的）POST 的整个响应/请求回应：

Allow: POST
Connection: keep-alive
Content-Length: 4
Content-Type: text/html; charset=utf-8
Date: Sun, 14 Jun 2020 14:30:00 GMT
Etag: W/"4-Yf+Bwwqjx254r+pisuO9HfpJ6FQ"
Server: Cowboy
Via: 1.1 vegur
X-Powered-By: Express

请求：

Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en,en-US;q=0.9,fr-FR;q=0.8,fr;q=0.7
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: serverUrl
Origin: http://localhost:4200
Referer: http://localhost:4200/menu
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36

【问题讨论】：

【参考方案1】：

尝试为您的路线启用CORS preflight (OPTIONS) handling。

当您需要您的路由来处理所谓的复杂 CORS 操作时，您必须添加一个 OPTIONS 路由处理程序。浏览器发送一个额外的请求，一个 OPTIONS 请求。

为什么这么复杂？因为网络蠕变。

添加此路由处理程序。就在您的帖子处理是一个好地方之前。