首页 > 解决方案 > 尽管正确设置了 Access-Control-Allow-Origin,但浏览器阻止了 CORS 请求

问题描述

我们的供应商之一开发的 Javascript 需要向我们公司的服务发出跨源 XMLHttpRequest 请求。GET 请求的 URL(出于安全原因被混淆)基本上就像

https://infoservice.testcompany.com/ourservice/api/public/eventshash

不幸的是,此请求的 OPTIONS 预检失败并出现意外错误(Firefox 控制台):

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://infoservice.testcompany.com/ourservice/api/public/eventshash. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]

但是,当我分析请求时,我可以准确地找到错误消息中抱怨的标头变量和值。稍微混淆的 HAR 输出:

{
  "log": {
    "version": "1.1",
    "creator": {
      "name": "Firefox",
      "version": "62.0"
    },
    "browser": {
      "name": "Firefox",
      "version": "62.0"
    },
    "pages": [
      {
        "startedDateTime": "2018-09-20T06:44:28.458+02:00",
        "id": "page_1",
        "title": "Main page - Home",
        "pageTimings": {
          "onContentLoad": -1,
          "onLoad": -1
        }
      }
    ],
    "entries": [
      {
        "pageref": "page_1",
        "startedDateTime": "2018-09-20T06:44:40.869+02:00",
        "request": {
          "bodySize": 0,
          "method": "OPTIONS",
          "url": "https://infoservice.testcompany.com/ourservice/api/public/eventshash",
          "httpVersion": "HTTP/1.1",
          "headers": [
            {
              "name": "Host",
              "value": "infoservice.testcompany.com"
            },
            {
              "name": "User-Agent",
              "value": "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0"
            },
            {
              "name": "Accept",
              "value": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"
            },
            {
              "name": "Accept-Language",
              "value": "de,en;q=0.7,en-US;q=0.3"
            },
            {
              "name": "Accept-Encoding",
              "value": "gzip, deflate, br"
            },
            {
              "name": "Access-Control-Request-Method",
              "value": "GET"
            },
            {
              "name": "Access-Control-Request-Headers",
              "value": "if-modified-since"
            },
            {
              "name": "Origin",
              "value": "https://mainpage.testcompany.com"
            },
            {
              "name": "Connection",
              "value": "keep-alive"
            }
          ],
          "cookies": [],
          "queryString": [],
          "headersSize": 484
        },
        "response": {
          "status": 200,
          "statusText": "OK",
          "httpVersion": "HTTP/1.1",
          "headers": [
            {
              "name": "Date",
              "value": "Thu, 20 Sep 2018 04:44:40 GMT"
            },
            {
              "name": "Cache-Control",
              "value": "private"
            },
            {
              "name": "Cache-Control",
              "value": "max-age=10"
            },
            {
              "name": "Access-Control-Allow-Origin",
              "value": "https://mainpage.testcompany.com"
            },
            {
              "name": "Access-Control-Allow-Credentials",
              "value": "true"
            },
            {
              "name": "Allow",
              "value": "GET,HEAD,POST,OPTIONS"
            },
            {
              "name": "Vary",
              "value": "Origin"
            },
            {
              "name": "Access-Control-Expose-Headers",
              "value": "Accept-Language"
            },
            {
              "name": "Access-Control-Allow-Headers",
              "value": "if-modified-since"
            },
            {
              "name": "Access-Control-Allow-Methods",
              "value": "GET, HEAD, OPTIONS"
            },
            {
              "name": "Accept-Language",
              "value": "de,en;q=0.7,en-US;q=0.3"
            },
            {
              "name": "Content-Length",
              "value": "0"
            },
            {
              "name": "Connection",
              "value": "close"
            },
            {
              "name": "Content-Type",
              "value": "application/json"
            }
          ],
          "cookies": [],
          "content": {
            "mimeType": "application/json",
            "size": 0,
            "text": ""
          },
          "redirectURL": "",
          "headersSize": 504,
          "bodySize": 504
        },
        "cache": {},
        "timings": {
          "blocked": 23,
          "dns": 0,
          "connect": 11,
          "ssl": 0,
          "send": 0,
          "wait": 14,
          "receive": 0
        },
        "time": 48,
        "_securityState": "secure",
        "serverIPAddress": "192.168.0.1",
        "connection": "443"
      }
    ]
  }
}

如您所见,我收到

{
    "name": "Access-Control-Allow-Origin",
    "value": "https://mainpage.testcompany.com"
},

这应该是正确的。

在 Apache 中,我按如下方式创建 CORS 标头:

<Files eventshash>
ForceType application/json
# Not needed, saves time:
Header unset ETag
FileETag None

# CORS:
SetEnvIf Origin "http.*\.testcompany\.com.*$" AccessControlAllowOrigin=$0
Header Always Set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header Append Vary Origin
Header Always Set Access-Control-Allow-Credentials true env=AccessControlAllowOrigin
Header set Access-Control-Expose-Headers "Accept-Language" env=AccessControlAllowOrigin
Header set Access-Control-Allow-Headers "if-modified-since" env=AccessControlAllowOrigin
Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS" env=AccessControlAllowOrigin
Header echo Accept-Language
</Files>

我可以在 Firefox、IE11 和 Chrome 中看到 CORS 阻止错误。但我认为我的 CORS 标头是正确的,我完全不知道网络服务器回复中可能还缺少什么。啊,是的,我知道 Access-Control-Allow-Origin: "*" 不好,因此没有使用它。只是为了完成我的输入。

知道什么可能丢失/错误吗?

铜,斯蒂芬

标签: cors

解决方案


当服务器不接受来自其他域的请求时,会发生此错误。

例如:如果我的服务器在https://test.com上运行并且我正在向其他服务器(https://test2.com)发出 get 请求,并且 test2 服务器未配置为接受其他服务器请求,那么这个发生错误。

在您的情况下,我认为您在 apache 文件中缺少安全条目,

"http.*\.testcompany\.com.*$"

请将此更改为以下

"https.*\.testcompany\.com.*$

推荐阅读