关于javascript：未捕获(Promise)TypeError：无法获取和Cors错误


Uncaught (in promise) TypeError: Failed to fetch and Cors error

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

1。如果在下面的代码中保留" mode"：" no-cors"，则可以使用Postman从服务器获取数据，但不能使用自己的服务器获取数据。认为这一定是我的客户端错误

  • 当我删除" mode"：" no-cors"时，我得到了2个错误：
    -Fetch API无法加载http：// localhost：3000 /。在飞行前响应中，Access-Control-Allow-Headers不允许请求标头字段access-control-allow-origin。
    -未捕获(Promise)TypeError：无法获取

    • 建议快速浏览放入"模式"：" no-cors"，该错误已解决，但这样做不对。

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

    真的希望我已经足够清楚，但是可以肯定的是，我在这里没有给出明确的解释：S

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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);
        });
    }
    相关讨论

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

    在行'access-control-allow-origin'中添加" non standard "标头将触发OPTIONS预检请求，您的服务器必须正确处理该预检请求，以便甚至发送POST请求。

    您也在错误地执行fetch ... fetch为Response对象返回" promise "，该对象具有json，text等的Promise创建者，具体取决于内容类型...

    简而言之，如果您的服务器端能够正确处理CORS(从您的意见中可以看出它确实可以做到)，则以下内容应该可以工作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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并没有真正的兴趣(毕竟它对对象进行了字符串化)-这样做更容易

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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;
        });
    }
    相关讨论

    在我的情况下，问题出在协议上。我试图用http而不是https调用脚本URL。

    请参阅mozilla.org \\的有关CORS工作原理的文章。

    您将需要服务器发送回正确的响应标头，例如：

    1
    2
    3
    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，仅当您尝试传递身份验证数据时才能使用。在这种情况下，您需要明确列出要允许的原始域。要允许多个域，请参阅此帖子

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

    中配置前端和后端

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

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

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