APIからPOSTデータを取得しています（ノードjs、反応します）

Question

私のAPIにPOSTリクエストをしようとしています。ハンドラは、現在

fetch('http://localhost:8080/login', { 
     method: 'post', 
     headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
     }, 
     body: JSON.stringify({ 
     username: this.state.username, 
     password: this.state.password 
     }) 
    }); 

私は何を渡していますが無関係です...

app.post('/login', function(req, res, next) { 
    console.log("here"); 
    ... 
}); 

このAPIは、localhostの8080でホストされていると、私はそうなどのデータを取得しています...このようになりますPOSTリクエストを成功させたいだけです。私は、フォームを送信すると、それがAPIを取り出し、そしてこれは私がコンソールに乗るメッセージです...

OPTIONS /login 200 8.177 ms - 4 

それは何かが働いているかのように見えますが、それは、console.log("here");が呼び出されることは決してありませんしませんでした。

私はAPIを適切に呼び出すつもりはないと思います。ヘッダーを削除すると、POST呼び出しが行われますが、データをresponseに渡すために重要であるため、これらのヘッダーが必要と思われます。私は何をすべきか？

Answer 1

CORS権限の問題が発生している可能性があります。これは、実行中のノードサーバーのURLとは異なるホスト（ローカルファイルシステムなど）からWebアプリケーションを提供している場合に常に発生します。ブラウザは、プロトコル、サブドメイン、ドメイン、さらにポートに正確に一致しないURLへのすべてのajaxアクセスを制限します。

host the static HTML/JS/CSS from the node serverとすると、問題を解決する可能性があります。または、ノードサーバーにCORS権限を追加することもできます。基本的には

、ノードでのご/loginルートはあなたが明示を使用していると仮定すると、次のようなものを追加する前に：

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 

あなたはMDNまたはenable-cors.org