Ionic 3 - POST 数据到 Heroku 端点

Question

所以我在端点 https://sample.herokuapp.com/ 的 Heroku 上有一个 back-end 服务运行。我正在尝试 POST 以下 JSON object 到 /bug/ 端点：

{
    "email": "email@gmail.com",
    "name": "Anthony",
    "text": "Test Bug",
    "picture": "Empty"
}

如果我 POST 在 Insomnia 或 Postman 中使用此数据，它可以完美运行并且 returns HTML 返回解析后的信息。但是，当我在 Ionic 3 中使用以下代码 POST 此数据时，

sendMail(type:string, text:string):void {
            this.nativeStorage.getItem('sample').then((sample) => {
                  var data = new Object();
                  data["name"] = sample.name
                  data["email"] = sample.email;
                  data["picture"] = sample.picture;
                  data["text"] = text;

                  this.db.object('/general/sample').take(1).subscribe((sample) => {
                        var xhr = new XMLHttpRequest();
                        var endpoint = sample.address + sample.endpoints[type];

                        xhr.addEventListener("readystatechange", function () {
                        if (this.readyState === 4) {
                            console.log("Got response: " + this.responseText);
                        }
                    });

                        xhr.open("POST", endpoint);
                        xhr.setRequestHeader("Accept", "application/json");
                    xhr.setRequestHeader("Content-Type", "application/json");
                        console.log("sample sending: " + JSON.stringify(data, undefined, 2));
                        console.log("sample endpoint: " + endpoint);

                    xhr.send(JSON.stringify(data));
                  })
            })
    }

我在 Heroku 中收到以下错误日志：

2017-07-05T17:02:24.707431+00:00 heroku[router]: at=info method=OPTIONS path="/bug" host=sample.herokuapp.com request_id=5e679c8e-cac7-4ff2-9277-dec80a250c11 fwd="150.108.242.198" dyno=web.1 connect=1ms service=3ms status=200 bytes=215 protocol=https

我对这个问题做了很多研究，我认为这是一个 CORS 问题。但是，我曾尝试使用 Access-Control-Allow-... headers 来解决此问题，但一直收到相同的错误。

我已经安装了 Cordova whitelist 插件并将 meta 标签添加到我的 index.html。

这是一个相当复杂的问题，非常感谢大家的帮助！

Answer 1

在heroku这边你有配置cors吗？

 var app = express();
 /* cors conig */
 var corOptions = {
     "origin": "*",
     "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
     "preflightContinue": true,
     allowedHeaders:  'Content-Type,Authorization,X-Requested-With'
 }
 app.use(cors(corOptions));

我的 cors 依赖项："cors"：“^2.8.1”

Ionic 3 - POST 数据到 Heroku 端点

Ionic 3 - POST Data to Heroku Endpoint

heroku

node.js

ionic-framework

ionic3