跨域的fetch()导致JSON.parse错误

时间:2019-09-24 19:16:56

标签: cors fetch

我正在尝试将fetch()与跨域一起使用,但是却遇到了异常错误。我在http://example2.com/index.html

上托管了以下脚本
let url = "https://example1.com/login";
fetch(url,
        {
        "method":"POST",
        "content-type":"application/x-www-form-urlencoded",
        "mode":"no-cors",
        "headers":{
                "Authorization":"Basic johnjohn",
                "Auth-Secret":"johnsecretpassword",
        }
})
.then(response=>response.text())
.then(content=>{
        console.log(content); // prints empty line
        json = JSON.parse(content);
})
.catch(e=>console.log(`Error occurred: ${e}`));

运行此脚本时,我的console.log(content)打印一个空行,而我的JSON.parse(content)给出一个Error occurred: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data错误。

当我进入FireFox开发者控制台时,单击网络,单击响应,我确实看到以下有效负载:

enter image description here

response.text()更改为response.json()会触发具有相同JSON解析错误的catch块。

此外,我的https://example1.com/login是一个具有以下内容的php文件:

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Authorization, Auth-Secret, Content-Type');

die(json_encode(array("data"=>"authorization","status"=>"fail")));

我在做什么错了?

1 个答案:

答案 0 :(得分:1)

在我上面的评论中感谢@Amy。这两个更改解决了问题:

我将此行添加到了login.php

header('Access-Control-Allow-Headers: Authorization, Auth-Secret, Content-Type');

然后我在"mode":"no-cors"中删除了行index.html

这样,我的index.html将尊重CORS,而我的login.php准备访问其他标头。