CORS：访问控制允许来源不等于提供的来源答案

【问题标题】：CORS: Access-Control-Allow-Origin not equal to supplied originCORS：访问控制允许来源不等于提供的来源
【发布时间】：2015-04-05 15:14:32
【问题描述】：

我正在尝试使用 sendgrid 从应用程序发送电子邮件。这应该不会太难，而且我以前用 PHP 发送过电子邮件。在这种情况下，我想用 Javascript 来做，因为它是 Ember 应用程序的一部分。第一个问题是“No 'Access-Control-Allow-Origin”消息，我试图用 CORS 解决。现在我遇到了一个不同的错误！

现在我不知道该去哪里解决这个问题。我使用的代码如下：

(function(){
  makeCorsRequest('GET', mailUrl); 
})();

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
}

function makeCorsRequest(type, url) {
  var xhr = createCORSRequest(type, url);
  if (!xhr) {
    alert('CORS not supported');
    return;
  }
  xhr.onload = function() {
    var text = xhr.responseText;
    console.log(text);
    var title = getTitle(text);
    alert('Response from CORS request to ' + url + ': ' + title);
  };

  xhr.onerror = function() {
    alert('Woops, there was an error making the request.');
  };

  xhr.send(); 
}

这给了我错误：

The 'Access-Control-Allow-Origin' header has a value 'https://sendgrid.com'      that is not equal to the supplied origin. Origin 'http://localhost' is   therefore not allowed access.

【问题讨论】：

您是从https://sendgrid.com 调用此代码吗？如果没有，您可以直接从 javascript 做任何事情。服务器必须发送到您要使用的实际域或 *.

标签： javascript xmlhttprequest cors sendgrid

【解决方案1】：

sendGrid CORS 策略不允许浏览器调用其 API（除非您在“sendgrid.api-docs.io”域中）...您必须从您的服务器发送电子邮件，

但如果只是出于测试或开发目的，您可以使用我在 github 上的演示 https://github.com/itisnajim/sendgrid-nodejs

将您的数据发布到 http://sendgrid-nodejs-oxailstudiosnode.7e14.starter-us-west-2.openshiftapps.com

Ajax 示例：

let urlStr = "http://sendgrid-nodejs-oxailstudiosnode.7e14.starter-us-west-2.openshiftapps.com";
const msg = {
    "personalizations": [
        {"to": [{"email": "example1@mail.com"}]}
    ],
    "from": {"email": "example2@mail.com"},
    "subject": "subject example",
    "content": [{"type": "text/plain", "value": "example body text"}]
};

$.ajax({
    url: urlStr,
    type: 'post',
    data: JSON.stringify(msg),
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Bearer API_KEY_HERE")
    },
    success: function(data){
        //console.log(data);
        //OK: Mail sent!!
    },
    error: function( jqXhr, textStatus, errorThrown ){
        //console.log( errorThrown, textStatus, jqXhr );
        if(jqXhr.status === 202 || jqXhr.status === "202"){
            //OK: Mail sent!!
        }else
        console.error("Mail not sent! Err:"+JSON.stringify(errorThrown))

    }
})

【讨论】：

【解决方案2】：

您似乎是从浏览器中运行的 Ember 应用调用 SendGrid API？如果是这样，您可能不应该这样做（出于多种安全原因）。

您需要向在您自己的域上运行的服务器发出 AJAX 请求，并拥有您的服务器

验证请求是否合法，并且
调用 SendGrid API 发送电子邮件

暴露您的 SendGrid API 密钥并直接从浏览器调用 API 会将您的 SendGrid 帐户暴露给潜在的滥用者。

对于服务器端 API 调用，请查看 SendGrid's API Clients。您不需要自己编写 API 调用。

【讨论】：