web-dev-qa-db-ja.com

応答の処理-SyntaxError：モードを使用すると入力が予期せず終了する： 'no-cors'

ReactJSのREST-API呼び出しを試行し、応答を処理したい。呼び出しは機能し、応答を取得します。これはChrome Dev Toolsで確認できます。

function getAllCourses() {
fetch('http://localhost:8080/course', {
    method: 'POST',
    mode: 'no-cors',
    credentials: 'same-Origin',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        objectClass: 'course',
        crud: '2'
    })
}).then(function (response) {
    console.log(response);
    return response.json();

}).catch(function (err) {
    console.log(err)
});
}

応答を処理しようとすると、「SyntaxError：Unexpected end of input」が表示されました

return response.json();

Console.logは次のようになります。

Console.log(response)

私の応答JSONは次のようになります、それは有効です、私はjsonlintでそれをチェックしました：

[
  {
    "0x1": {
      "users": [],
      "lectures": [],
      "owner": "0x2",
      "title": "WWI 14 SEA",
      "description": null,
      "objectClass": "course",
      "id": "course_00001"
    },
    "0x2": {
      "username": "system",
      "lectures": [],
      "course": null,
      "solutions": [],
      "exercises": [],
      "roles": [
        "0x3",
        "0x4",
        "0x5"
      ],
      "objectClass": "user",
      "id": "user_00001"
    },
    "0x3": {
      "roleName": "ROLE_ADMIN",
      "objectClass": "role",
      "id": "role_00001"
    },
    "0x4": {
      "roleName": "ROLE_STUDENT",
      "objectClass": "role",
      "id": "role_00002"
    },
    "0x5": {
      "roleName": "ROLE_DOCENT",
      "objectClass": "role",
      "id": "role_00003"
    }
  }
]
javascriptjsonreactjscorsfetch-api
21
Chilliggo

リクエストからmode: 'no-cors'設定を削除する必要があります。そのmode: 'no-cors'はまさにあなたが抱えている問題の原因です。

mode: 'no-cors'要求は、応答タイプをopaqueにします。質問のconsole-logスニペットはそれを明確に示しています。 opaqueは、フロントエンドJavaScriptコードが応答の本文またはヘッダーを表示できないことを意味します。

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode の説明：

no-cors — JavaScriptは結果のResponseのプロパティにアクセスできません

したがって、mode: 'no-cors'を設定すると、基本的にブラウザに通知されます。「どのような状況でもフロントエンドJavaScriptコードが応答本文またはヘッダーにアクセスしないようにします。」

mode: 'no-cors'からの応答にhttp://localhost:8080/course応答ヘッダーが含まれていないか、リクエストが CORSプリフライトをトリガーするためにブラウザがOPTIONSリクエストをAccess-Control-Allow-Originに送信しているため、リクエストにhttp://localhost:8080を設定していると思います 。

ただし、mode: 'no-cors'の設定は、これらの問題の解決策ではありません。解決策は次のいずれかです。

45
sideshowbarker

thenで、response.jsonを返す前に応答がOKかどうかを確認する必要があります。

.then(function (response) {
    if (!response.ok) {
        return Promise.reject('some reason');
    }

    return response.json();

})

拒否されたプロミスにエラーメッセージを含めたい場合は、次のようなことができます。

.then(function (response) {
    if (!response.ok) {
       return response.text().then(result => Promise.reject(new Error(result)));
    }

    return response.json();
})
2
Kmaschta

私はこの答えが非常に遅く、解決されている可能性があることを知っていますが、今日は同じ問題があり、ヘッダーハッシュの最後に「、」を追加するだけでエラーが発生しなくなりました

export function addContacts(formData) {
  return(dispatch) => {
    dispatch({type: 'POSTING_CONTACTS'});
    console.log(formData)
    return fetch(uri, {
      method: 'POST',
      body: JSON.stringify({contact: {name: formData.name, phone_number: formData.phoneNumber}}),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
    })
    .then(response => {
        return response.json()
      }).then(responseJSON => {
        console.log(responseJSON)
        return dispatch({type: 'ADD_CONTACT', payload: responseJSON});
      })
  }
}
1
Temitope Ruth Elodimuor

次のコードをコピーして、<system.webServer>タグの下のweb.configファイルに貼り付けてください。

<httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>
0
Juboraj Sarker

Phpのヘッダーまたは別のサーバーエンドポイントに行を追加することにより、CORSポリシーの問題を回避できます。

<?php
header('Access-Control-Allow-Origin: *');
//or
header('Access-Control-Allow-Origin: http://example.com');

// Reading JSON POST using PHP
$json = file_get_contents('php://input');
$jsonObj = json_decode($json);

// Use $jsonObj
print_r($jsonObj->message);

...
// End php
?>

POSTリクエストのある作業フェッチコードのモデル：

const data = {
        optPost: 'myAPI',
        message: 'We make a research of fetch'
    };
const endpoint = 'http://example.com/php/phpGetPost.php';

fetch(endpoint, {
    method: 'POST',
    body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
    console.info('fetch()', response);
    return response;
});
0
Roman