我正在尝试将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开发者控制台时,单击网络,单击响应,我确实看到以下有效负载:
将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")));
我在做什么错了?
答案 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
准备访问其他标头。