Question

我试图让登录按钮单击以调用获取REST调用。

但是，问题在于，获取失败，并在Javascript控制台中显示了此错误消息。

// CORS策略已阻止从原始位置进行访问：请求的资源上不存在“ Access-Control-Allow-Origin”标头 //如果不透明满足您的需要，请将请求模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。 //异常无法提取。

为什么会这样，为什么我不能从React中的Button单击中调用REST调用？

private handleLogin =（）=> {

    console.log("button submit");

    // Access to fetch from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
    // If an opaque serves your need set the requests mode to 'no-cors' to fetch the resource with CORS disabled.
    // Exception Failed to Fetch.
    fetch('https://gturnquist-quoters.cfapps.io/api/random')
    .then((res) => {
        if (res.status >= 400) {
            throw new Error("Bad response from server");
        }
        return res.json();
    })
    .then((stories) => {
        console.log(stories);
    });


    this.props.login(this.state);


}

Answer 1

您尝试调用的API不允许通过AJAX从浏览器中调用。它需要设置特定的标头以指示允许哪些ajax请求。

更多内容：https://gturnquist-quoters.cfapps.io/api/random

React Fetch的错误提取被CORS策略阻止

1 个答案: