未捕获（承诺）TypeError：无法获取和Cors错误 [英] Uncaught (in promise) TypeError: Failed to fetch and Cors error

问题描述

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

having a problem with getting data back from database. I am trying my best to explain the problem.

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

1.If I leave "mode":"no-cors" inside the code below, then I can get data back from server with Postman, but not with from my own server. Thinking it has to be my client side error

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

1. When I remove "mode":"no-cors" then I am getting 2 errors: -Fetch API cannot load http://localhost:3000/. Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response. -Uncaught (in promise) TypeError: Failed to fetch

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

Quick Browsing suggested to put in the "mode":"no-cors" which fixed this error, but it does not feel right thing to do.

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

So I thought maybe somebody has a suggestion how to approach this problem.

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

Really hope I was clear enough, but pretty sure I am not giving clear explanation here :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);
    });
}

推荐答案

添加模式：'no-cors'到请求标头保证响应中没有响应

Adding mode:'no-cors' to the request header guarantees that no response will be available in the response

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

Adding a "non standard" header, line 'access-control-allow-origin' will trigger a OPTIONS preflight request, which your server must handle correctly in order for the POST request to even be sent

您还在做 fetch 错误... fetch 返回 Response 对象的承诺，该对象具有 json 的承诺创建者， text 等等取决于内容类型......

You're also doing fetch wrong ... fetch returns a "promise" for a Response object which has promise creators for json, text, etc. depending on the content type...

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

In short, if your server side handles CORS correctly (which from your comment suggests it does) the following should work

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并不感兴趣（它将字符串化毕竟对象） - 它更简单

however, since your code isn't really interested in JSON (it stringifies the object after all) - it's simpler to do

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;
    });
}

这篇关于未捕获（承诺）TypeError：无法获取和Cors错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！