Question

嗨，我遇到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 ，更多定义：Link about preflighted request

这意味着在角4将数据发送到服务器之前，这要求服务器是否可以使用动词OPTION接收我的数据，如果服务器的响应是OK，则angular 4发送数据形式。

问题：

在控制台中，我总是收到此错误消息：

选项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)

});

但我在控制台遇到同样的错误。

通过手动配置标题 Discussion StackOverFlow或Discussion 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

问题：

这是我的真正问题还是我理解不好？的和/或 我该怎么做才能解决这个问题？的和/或 有什么建议吗？

感谢。

Answer 1

问题似乎是https://pablocordovaupdated.herokuapp.com/api 总是返回404：

$ curl -i https://pablocordovaupdated.herokuapp.com/api
HTTP/1.1 404 Not Found

也就是说，服务器没有对OPTIONS请求执行任何特殊/不同的操作 - 而是所有请求都只是命中404.

app.post('/api', function(req, res, next) {
    console.log('!I AM YOUR FATHER');
    ...
});

我不清楚Express如何处理这种情况，但可能必须将其配置为为该路由发送一些类型的响应 - 而不仅仅是console.log on服务器端。

当我查看https://pablocordovaupdated.herokuapp.com/api的内容时，我看到的只是一个通用的Heroku 404页面 - 因此它不会从您的应用程序提供，而是回到由Heroku提供服务。例如，该404页面的内容包含：

<iframe src="//www.herokucdn.com/error-pages/no-such-app.html"></iframe>

也就是说，在任何情况下，您的应用代码根本无法按预期处理该URL的请求。所以看起来这就是你需要先解决的问题。

CORS - OPTIONS ... 404（未找到）

1 个答案: