web-dev-qa-db-ja.com

リクエスト後のAxios：ネットワークエラー

バックエンドにNodeJSを使用し、フロントエンドにReactJSを使用しています。

Axiosネットワークのリクエストに問題があります。すべてのGetリクエストは機能します。しかし、POSTリクエストは機能しません。このエラー「ネットワークエラー」があります

私はあなたに私の問題を示すために簡単なウェブサービスを作成しました：

//Serveur code

helloWs : (request:Express.Request, response:Express.Response) => {
        try {
            response.send('hello WS !')
        } catch (error) {
            console.error(error)
            response.send('error' + error + 'status : ' + error.response.status)     
            response.end()    
        }
    }

//Here I create my root 
router.post('/helloWs',DocumentController.helloWs)

//This is my front

 axios.post('http://localhost:9000/1/documents/helloWs', { 
 }) .catch(function (error) {
                if (error.response) {
                    console.log('Error data : ', error.response.data);
                    console.log('Error status : ', error.response.status);
                    console.log('Error headers : ', error.response.headers);
                } else if (error.request) {
                    console.log('Error request : ', error.request);
                } else {
                    console.log('Error message : ', error.message);
                }
                console.log(error.config);
            })

ナビゲーターコンソールでは、network error、そして私のWebサービスはOPTIONにあり、「POST」にはありません

Axiosにヘッダーを追加しようとしていますが、機能しません。私は郵便配達員でテストしたことを指定します、そしてそれは大丈夫です。アイデアはありますか？ありがとうございました

node.jsexpressaxios
3
Anaïs Saez

コメントで示唆されているように、cors関連のエラーである可能性が高いため、OPTIONリクエストは、ドメインにリソースにアクセスする権限があるかどうかを確認する実際のリクエストの前にブラウザによって行われます。

Postmanはプリフライトリクエストを実行しないため、応答が返されます。

ルートを定義する前に、このミドルウェアをサーバー側のコードに追加してみてください

app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();
});
3
Karim