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)
})

当执行上面的提取时，没有一个console.logs被执行......似乎只是挂起。但是小提琴手说不然。有什么想法吗？

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;
});

Javascript Fetch没有收到回复

1 个答案: