JSON 有效负载中的 URL 导致 CORS 问题答案

【问题标题】：URL in a JSON payload causes CORS issueJSON 有效负载中的 URL 导致 CORS 问题
【发布时间】：2021-01-12 23:02:53
【问题描述】：

我有一个 GraphQL 后端和一个应用程序的 React 前端。 CORS 策略设置为仅允许前端 https://my.server:443 访问后端 https://my.server:4444 并且它工作得很好......大部分时间。

我的 Express.js 服务器启动如下：

server.start(
  {
    cors: {
      credentials: true,
      origin: [ "https://my.server" ]
    },
  },
  (deets) => {
    console.log(`Server is now running on port http://localhost:${deets.port}`);
  }
);

当我使用包含 URL 的有效负载向 API 发出 POST 请求时，我收到了 CORS 错误。这是对话：

选项请求：

OPTIONS / HTTP/2
Host: my.server:4444
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:81.0) Gecko/20100101 Firefox/81.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Referer: https://my.server/qualifications
Origin: https://my.server
Connection: keep-alive
TE: Trailers

回复：

HTTP/2 204 No Content
date: Thu, 15 Oct 2020 12:16:25 GMT
x-powered-by: Express
access-control-allow-origin: https://my.server
vary: Origin, Access-Control-Request-Headers
access-control-allow-credentials: true
access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
access-control-allow-headers: content-type
X-Firefox-Spdy: h2

POST 请求：

POST / HTTP/2
Host: my.server:4444
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:81.0) Gecko/20100101 Firefox/81.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Content-Type: application/json
Content-Length: 616
Origin: https://my.server
Referer: https://my.server/qualifications
Connection: keep-alive
Cookie: token=eyJhbGc<removed-jwt>gmWVO_I68
TE: Trailers

有效载荷：

{
  "operationName": "UPDATE_QUALIFICATION_MUTATION",
  "variables": {
    "id": "ckf54v5lm0dck07821octvj4b",
    "name": "MBA",
    "description": "Testing Links",
    "link": "http://www.google.com"                          <---- URL in payload
  },
  "query": "mutation UPDATE_QUALIFICATION_MUTATION($id: ID!, $name: String, $link: String, $description: String, $company: CompanyUpdateOneInput) {\n  updateQualification(where: {id: $id}, data: {name: $name, link: $link, description: $description, company: $company}) {\n    id\n    name\n    description\n    link\n    company {\n      id\n      name\n      __typename\n    }\n    __typename\n  }\n}\n"
  }

回复：

HTTP/2 403 Forbidden
server: awselb/2.0
date: Thu, 15 Oct 2020 12:16:25 GMT
content-type: text/html
content-length: 118
X-Firefox-Spdy: h2

OKAY...让我们这次不带 URL 再试一次...

让我感到困惑的是，当我做同样的事情时，除了包含 URL 的一个字段 - 我得到这个：

选项请求：

OPTIONS / HTTP/2
Host: my.server:4444
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:81.0) Gecko/20100101 Firefox/81.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Referer: https://my.server/qualifications
Origin: https://my.server
Connection: keep-alive
TE: Trailers

回复：

HTTP/2 204 No Content
date: Thu, 15 Oct 2020 13:07:41 GMT
x-powered-by: Express
access-control-allow-origin: https://my.server
vary: Origin, Access-Control-Request-Headers
access-control-allow-credentials: true
access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
access-control-allow-headers: content-type
X-Firefox-Spdy: h2

POST 请求：

POST / HTTP/2
Host: my.server:4444
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:81.0) Gecko/20100101 Firefox/81.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Content-Type: application/json
Content-Length: 560
Origin: https://my.server
Referer: https://my.server/qualifications
Connection: keep-alive
Cookie: token=eyJhbG<removed-jwt>WVO_I68
TE: Trailers

有负载：

{
  "operationName": "UPDATE_QUALIFICATION_MUTATION",
  "variables": {
    "id": "ckf54v5lm0dck07821octvj4b",
    "name": "MBA",
    "description": "Testing Links",
    "link": "not-a-url"                                <---- THIS CHANGED
  },
  "query": "mutation UPDATE_QUALIFICATION_MUTATION($id: ID!, $name: String, $link: String, $description: String, $company: CompanyUpdateOneInput) {\n  updateQualification(where: {id: $id}, data: {name: $name, link: $link, description: $description, company: $company}) {\n    id\n    name\n    description\n    link\n    company {\n      id\n      name\n      __typename\n    }\n    __typename\n  }\n}\n"
  }

回复：

HTTP/2 200 OK
date: Thu, 15 Oct 2020 13:07:41 GMT
content-type: application/json
content-length: 173
x-powered-by: Express
access-control-allow-origin: https://my.server
vary: Origin
access-control-allow-credentials: true
X-Firefox-Spdy: h2

现在可以正常使用了吗？？我留下的问题比其他任何事情都多：

请求的 JSON 负载如何影响 CORS？
我的 Express 服务器 CORS 配置中是否缺少某些内容？
在负载中发送 URL 是否存在某种一般性问题？
如果是这样，是否有建议的解决方法？（我只是打算在前端对其进行 base64 编码/解码，但这样做似乎是“错误的”！）

任何指针将不胜感激！

【问题讨论】：

标签： express cors

【解决方案1】：

我们今天偶然发现了一个类似的问题。

事实证明，在我们的案例中，它是由拒绝请求的 WAF 配置引起的。我们是在分析 WAF 采样和负载均衡器日志后发现的。

祝你好运！

【讨论】：