Question

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

1.如果我离开＆＃34;模式＆＃34;：＆＃34; no-cors＆＃34;在下面的代码中，然后我可以使用Postman从服务器获取数据，但不能从我自己的服务器获取数据。认为它必须是我的客户端错误

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

快速浏览建议进入＆＃34;模式＆＃34;：＆＃34; no-cors＆＃34;修正了这个错误，但感觉不对。

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

真的希望我足够清楚，但很确定我在这里没有给出明确的解释：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，只有在您尝试传递身份验证数据时才能使用<label> Your Name (required) [text* your-name] </label> <label> Your Email (required) [email* your-email] </label> <label> Your Message [textarea your-message] </label> [submit "Send"]。在这种情况下，您需要明确列出要允许的源域。要允许多个域，请参阅this post。

Answer 3

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

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

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

最好的解决方案是使用像ngnix之类的代理，它易于配置，它将模拟生产部署的实际情况

Answer 4

就我而言，问题出在协议上。我试图用http而不是https调用脚本URL。

Answer 5

试试这个

 await fetch(url, {
      mode: 'no-cors'
 })

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

5 个答案: