未捕获（承诺）TypeError：无法获取和Cors错误

Question

从数据库中获取数据时遇到问题。我正在尽力解释这个问题。

1.如果我在下面的代码中留下“模式”：“no-cors”，那么我可以使用Postman从服务器获取数据，但不能从我自己的服务器获取数据。认为它必须是我的客户端错误

2. 当我删除“模式”：“no-cors”然后我得到2个错误：-Fetch API无法加载http://localhost:3000/。在预检响应中，Access-Control-Allow-Header不允许请求头字段access-control-allow-origin。 -Uncaught（in promise）TypeError：无法获取

快速浏览建议放入“模式”：“no-cors”修复了这个错误，但感觉不对。

所以我想也许有人建议如何解决这个问题。

真的希望我足够清楚，但很确定我在这里没有给出明确的解释：S

function send(){
    var myVar = {"id" : 1};
    console.log("tuleb siia", document.getElementById('saada').value);
    fetch("http://localhost:3000", {
        method: "POST",
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "text/plain"
        },//"mode" : "no-cors",
        body: JSON.stringify(myVar)
        //body: {"id" : document.getElementById('saada').value}
    }).then(function(muutuja){

        document.getElementById('väljund').innerHTML = JSON.stringify(muutuja);
    });
}

Answer 1

将mode:'no-cors'添加到请求标头可确保响应中没有可用的响应

添加“非标准”标题，行'access-control-allow-origin'将触发OPTIONS预检请求，服务器必须正确处理该请求才能发送POST请求

你也在做fetch错误... fetch为Response对象返回“承诺”，该对象有json，text等的承诺创建者，具体取决于内容类型...

简而言之，如果您的服务器端正确处理CORS（从您的评论中暗示它确实如此），则以下内容应该有效

function send(){
    var myVar = {"id" : 1};
    console.log("tuleb siia", document.getElementById('saada').value);
    fetch("http://localhost:3000", {
        method: "POST",
        headers: {
            "Content-Type": "text/plain"
        }
        body: JSON.stringify(myVar)
    }).then(function(response) {
        return response.json();
    }).then(function(muutuja){
        document.getElementById('väljund').innerHTML = JSON.stringify(muutuja);
    });
}

但是，因为你的代码并不真正对JSON感兴趣（它毕竟将对象字符串化） - 它更简单

function send(){
    var myVar = {"id" : 1};
    console.log("tuleb siia", document.getElementById('saada').value);
    fetch("http://localhost:3000", {
        method: "POST",
        headers: {
            "Content-Type": "text/plain"
        }
        body: JSON.stringify(myVar)
    }).then(function(response) {
        return response.text();
    }).then(function(muutuja){
        document.getElementById('väljund').innerHTML = muutuja;
    });
}

Answer 2

请参阅mozilla.org's write-up了解CORS的工作原理。

您需要服务器发回适当的响应标头，例如：

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization

请记住，您可以将"*"用于Access-Control-Allow-Origin，只有在您尝试传递身份验证数据时才能使用this post。在这种情况下，您需要明确列出要允许的源域。要允许多个域，请参阅ngnix。

Answer 3

您可以使用解决方案而无需添加“Access-Control-Allow-Origin”：“*”，如果您的服务器已经在使用代理网关，则不会发生此问题，因为前端和后端将在客户端的同一IP和端口中路由但是对于开发，如果您不需要额外的代码，则需要这三种解决方案之一1-通过使用代理服务器模拟真实环境并在同一端口配置前端和后端

2-如果你使用Chrome，你可以使用名为Allow-Control-Allow-Origin的扩展程序：*它可以帮助你避免这个问题

3-您可以使用代码，但某些浏览器版本可能不支持，因此请尝试使用以前的解决方案之一

最好的解决方案是使用像http这样的代理，它易于配置，它将模拟生产部署的真实情况

Answer 4

就我而言，问题是协议。我试图用https而不是qazxswpoi来调用脚本URL。