web-dev-qa-db-ja.com

CORS-オプション... 404（見つかりません）

こんにちは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を使用してデータを受信できるかどうかをサーバーに要求することを意味します。サーバーの応答が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 "。

エラー応答{_body：ProgressEvent、status：0、ok：false、statusText： ""、headers：Headers…}

何を試したか：

これまでのところ、問題は_https://pablocordovaupdated.herokuapp.com/api_が動詞OPTIONSの回答を返さないためであることを理解しています

それから私はこれを2つの方法で解決しようとしました：

corsパッケージの使用CORSパッケージ ドキュメントに従って構成しました。

_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にあるため、このメッセージを_heroku logs_で表示しようとしました。

しかし、これを行っても同じエラーが発生します。

詳細情報：

_.../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
_

質問：

それが私の本当の問題ですか、それとも悪いことを理解していますか？ および/またはその問題を解決するにはどうすればよいですか？ および/またはアドバイスはありますか？

ありがとう。

node.jsangularexpressherokucors
7
Pablo Cesar Cordova Morales

問題は https://pablocordovaupdated.herokuapp.com/apialwaysが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がこのケースをどのように処理するかは明確ではありませんが、そのルートに対してsome種類の応答を送信するように設定する必要がある可能性があります。ただconsole.logサーバー側。

https://pablocordovaupdated.herokuapp.com/api のコンテンツを見ると、一般的なHeroku 404ページが表示されているだけなので、アプリからは提供されず、代わりにHerokuによって提供されます。たとえば、その404ページのコンテンツは次のようになります。

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

つまり、そのURLのリクエストは、どのような状況でもアプリのコードで期待どおりに処理されないようです。だから、それはあなたが最初に修正する必要があるもののようです。

2
sideshowbarker