你好，我在处理CORS时遇到问题。
总体结构：
Angular 4将表单数据发送到我的API。当我发送有关联系表单的信息时，执行saveForm()函数。
app.component.ts
saveForm() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let requestOptions = new RequestOptions({ headers: headers });
// Encode JSON as string to exchange data to web server.
this.data = JSON.stringify(this.myContact);
this.http.post('https://pablocordovaupdated.herokuapp.com/api', this.data, requestOptions).subscribe(res => {
let result = res.json();
if(result['result'] == 'success') {
this.successMessage = true;
}
}
);
}
问题的根源在于我使用POST和Content-Type->application/json来发送数据，而根据定义，这会导致CORS - preflighted request出现问题，这里更多的定义：有关预检请求的链接
这意味着在Angular 4将数据发送到服务器之前，它会向服务器询问是否支持使用动词OPTION接收我的数据，如果服务器的响应是良好的，那么Angular 4会将表单数据发送过去。
问题：
控制台总是会显示以下错误信息：
OPTIONS https://pablocordovaupdated.herokuapp.com/api 404 (未找到)
XMLHttpRequest无法加载https://pablocordovaupdated.herokuapp.com/api。预检请求的响应未通过访问控制检查：所请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许从原始站点'https://pablocordova.herokuapp.com'进行访问，响应的HTTP状态码为404。
XHR加载失败：POST"https://pablocordovaupdated.herokuapp.com/api"。
ERROR Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}
我尝试过的方法：
到目前为止，我了解到问题是由于https://pablocordovaupdated.herokuapp.com/api没有返回OPTIONS的答案所引起的
那么我尝试通过两种方式解决这个问题：
使用cors包 CORS package，我按照文档进行了配置。
var express = require('express');
var cors = require('cors');
...
var app = express();
...
app.options('/api', cors());
app.post('/api', cors(), function(req, res, next) {
// Proccess to send this data via email
// and also save in data base(only for learning)
});
但是我在控制台中收到了相同的错误。
手动配置标题，可以通过StackOverFlow讨论或Github讨论进行操作。
该代码插入到每个需要编写标题的路由中，例如我的情况：
app.post('/api', function(req, res, next) {
if (req.method === 'OPTIONS') {
console.log('!OPTIONS');
var headers = {};
// IE8 does not allow domains to be specified, just the *
// headers["Access-Control-Allow-Origin"] = req.headers.origin;
headers["Access-Control-Allow-Origin"] = "*";
headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS";
headers["Access-Control-Allow-Credentials"] = false;
headers["Access-Control-Max-Age"] = '86400'; // 24 hours
headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept";
res.writeHead(200, headers);
res.end();
} else {
// Process to send this data via email
// and also save in data base(only for learning)
}
});
问题在于从未执行console.log('!OPTIONS');
这里我尝试了简单的方法：
app.post('/api', function(req, res, next) {
console.log('!I AM YOUR FATHER');
...
});
但是从未打印。
注意：我尝试使用heroku logs查看此消息，因为整个页面在Heroku中。
但是这样做我也收到了相同的错误。
更多信息：
当调用.../api时，我有以下头文件。
**GENERAL**:
Request URL:https://pablocordovaupdated.herokuapp.com/api
Request Method:OPTIONS
Status Code:404 Not Found
Remote Address:23.21.185.158:443
Referrer Policy:no-referrer-when-downgrade
**RESPONSE HEADERS**:
HTTP/1.1 404 Not Found
Connection: keep-alive
Server: Cowboy
Date: Wed, 10 May 2017 04:14:45 GMT
Content-Length: 494
Content-Type: text/html; charset=utf-8
Cache-Control: no-cache, no-store
**REQUEST HEADERS**:
OPTIONS /api HTTP/1.1
Host: pablocordovaupdated.herokuapp.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: https://pablocordova.herokuapp.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: https://pablocordova.herokuapp.com/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: es-ES,es;q=0.8
问题：
这是我的真正问题，还是我理解有误？或者 我应该怎么做来解决这个问题？或者 有什么建议吗？
谢谢。