AJAX 错误：“对预检请求的响应未通过访问控制检查”答案

【问题标题】：AJAX Error: "Response to preflight request doesn't pass access control check"AJAX 错误：“对预检请求的响应未通过访问控制检查”
【发布时间】：2018-08-05 22:03:32
【问题描述】：

我在向 SendGrid 电子邮件 API 发出 POST 请求时遇到问题。

当我提交表单以发出 POST 请求时，我在控制台中收到以下错误：

Failed to load https://api.sendgrid.com/v3/mail/send: Response to preflight 
request doesn't pass access control check: The 'Access-Control-Allow-Origin' 
header has a value 'https://sendgrid.api-docs.io' that is not equal to the 
supplied origin. Origin 'https://example.com/' is therefore not 
allowed access.

这是我的要求：

    $.ajax({
    method: "POST",
    url: 'https://api.sendgrid.com/v3/mail/send',
    headers: {
        'Authorization':'bearer XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        'Content-Type':'application/json'
    },
    data: {
      "personalizations": [
        {
          "to": [
            {
              "email": "example@email.com"
            }
          ],
          "subject": 'Contact form submission - example.com'
        }
      ],
      "from": {
        "email": sender
      },
      "content": [
        {
          "type": "text/plain",
          "value": content
        }
      ]
    }
  });

当我将以下行添加到数据中时：

dataType: 'jsonp',

错误信息变为如下：

GET https://api.sendgrid.com/alongurl 405 (Method Not Allowed)

我不确定为什么当我将控制台设置为 POST 时它会发出获取请求。我不确定为什么会发生这种情况。希望有人能指出我正确的方向。谢谢。

【问题讨论】：

您是否尝试过在SendGrid API Documents Website 上使用代码生成 我不确定100%，但我也会检查您的headers，因为这些可能区分大小写。 Authorization => authorization
所有 JSONP 都是 GET 因为它们是脚本请求而不是 ajax 并且它们不支持 POST 或 headers 。如果 api 没有启用 CORS（很多都没有启用，因此您不会公开凭据），请在您的服务器上使用代理
我刚刚尝试使用 SendGrid 的代码生成工具。它基本上只在 VanillaJS 而不是 JQuery 中进行相同的调用，但我仍然收到相同的确切错误消息。

标签： javascript jquery ajax

【解决方案1】：

由于 CORS，您无法通过浏览器向发送网格 API 发送请求。可能有很多原因，但 SendGrid doc explains exactly why 并建议您创建一个 Web 服务器来发送请求

来自上述链接的一个原因

当您有一个仅浏览器的应用程序可以访问 API 时，必须将 API 密钥嵌入到应用程序中。任何有权访问仅限浏览器的应用程序的人都可以访问所有 Javascript 源代码，包括您的 API 密钥。

还有建议的方法也可以从链接中做到这一点

您可以创建一个基于服务器的应用程序，这将保护您的 API 密钥不被泄露。可以实现 NodeJS、PHP、Ruby、Python、C#、Go 和 Java 等语言，以便从锁定的服务器环境的安全性中调用 API。

【讨论】：

最佳答案奖。我只是做了更多的研究，我基本上得出了相同的结论。