Javascript Fetch无法获取响应

Question

我正在通过JavaScript fetch调用一个认证服务以获取访问令牌。该服务是一个简单的RESTful调用。我可以使用fiddler看到调用成功（带有200响应和json数据）。然而，fetch响应似乎从未被调用。以下是代码片段：

const AUTHBODY = `grant_type=password&username=${username}&password=${password}&scope=roles offline_access profile`
const AUTHHEADER = new Headers({'Content-Type': 'application/x-www-form-urlencoded'})

const CONFIG = {
    method: 'POST',
    headers: AUTHHEADER,
    body: AUTHBODY
}

fetch('http://localhost:23461/connect/token', CONFIG).then(function(response) {
    console.log('response = ' + response)
    return response.json()
}).then(function(json) {
    console.log('json data = ' + json)
    return json
}).catch(function(error) {
    console.log('error = ' + error)
})

执行以上获取操作时，没有任何控制台日志被执行...似乎只是挂起了。但是Fiddler告诉我们不同的信息。有什么想法吗？

- Los Morales

---

是的，我已经使用 Fiddler 进行了测试，然后使用 Fiddler 监控了使用 JavaScript 的 fetch() 时的 HTTP 流量。所有调用都很好，只是在 fetch 中没有返回任何响应。 - Los Morales

这是Fiddler看到的Fetch调用的响应头： HTTP/1.1 200 OK Cache-Control: no-cache Pragma: no-cache Content-Length: 1966 Content-Type: application/json;charset=UTF-8 Expires: -1 Server: Kestrel Access-Control-Allow-Origin: * X-SourceFiles: =?UTF-8?B?QzpcbXZcd29ya3NwYWNlc1xCQ1NDeWJlclxCb3JkZXJlYXVcQkNTLkN5YmVyLkJvcmRlcmVhdVxhdXRoZW50aWNhdGU=?= X-Powered-By: ASP.NET Date: Mon, 08 Aug 2016 16:53:09 GMT - Los Morales

您的“X-SourceFiles”标头中的“... Rlcm ...”中的“m”后面有一个不可见的Unicode“零宽度非连接符”字符（char code 8204）。这似乎会引起问题；至少在我在http://www.test-cors.org/上测试时是这样的。（为了证明这一点，请从您的评论中复制“Rlcm”，或从*此*评论中的任何实例中复制它，并将其粘贴到浏览器的JS控制台中，然后执行“Rlcm‌”.length和/或“Rlcm‌”.charCodeAt(4)） - apsillers

没有任何console.log语句被执行。就好像在fetch调用之后，第一个then()之后没有任何东西被执行... - Los Morales

遇到了相同的问题，@LosMorales 如果你有解决方案，请回答一下。 - ZaidRehman

Answer 1

你可能遇到了CORS跨域问题。为了解决这个问题，你需要一些访问API服务器端的权限。特别是，你需要在php或其他服务器端点的头文件中添加一行代码：

<?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
?>

同时，请确保您的服务器端点头部中不要包含以下内容：

header("Access-Control-Allow-Credentials" : true);

使用POST请求的工作获取代码模型为：

const data = {
        message: 'We send a message to the backend with 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;
});

- Roman