javascript 从一个端口调用托管在另一个端口上的localhost API时出现CORS问题

x6h2sr28  于 2023-01-24  发布在  Java
关注(0)|答案(2)|浏览(168)

我在端口8501使用Docker托管了一个localhost Rest API POST查询:http://localhost:8501/v1/models/model:predict。我有一个运行JavaScript脚本的HTML文件,它使用WebServer for Chrome托管在http://127.0.0.1:8887/上。我可以从HTML-JS文件调用全局Rest API POST查询,并且我的本地Rest API可以从POSTMAN正常工作。但我无法从HTML-JS文件调用我的API。
下面是我的JS文件:

function foo() {        
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Access-Control-Allow-Origin", "*");
    myHeaders.append("Access-Control-Allow-Methods", "POST");

    var raw = JSON.stringify({"instances":[[0]]});

    var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
    };

    fetch("http://localhost:8501/v1/models/model:predict", requestOptions)
        .then(response => console.log(response.text()))
        .then(result => console.log(result))
        .catch(error => console.log('error', error));

}

我得到以下错误:
CORS策略已阻止从源"http://127.0.0.1:8887"在"http://localhost:8501/v1/models/model:predict"提取数据的访问:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头。如果不透明响应满足您的需要,请将请求的模式设置为"no-cors"以在禁用CORS的情况下提取资源。
有人能帮帮我吗?

gcuhipw9

gcuhipw91#

您似乎对CORS的理解有些“倒退”--Access-Control-Allow-OriginAccess-Control-Allow-Methods标头是在HTTP * response * 上指定的,而不是在 requests 上指定的。
如果任意来源的脚本可以有效地指示HTTP服务器必须接受哪些类型的请求以及来自哪些来源的请求,那么这将形成一个糟糕的跨站点安全模型。
正是HTTP服务通过在其提供的响应中指定适当的头来最终控制访问,并且用户代理验证跨源请求,如果服务器没有指示它允许来自不同源的请求,则用户代理拒绝继续--响应将被丢弃,并且将抛出错误。
简而言之,您需要向REST服务在localhost:8501生成的响应中添加标头,而不是为客户端脚本创建的请求指定标头,因为这些标头不执行任何操作。

sczxawaw

sczxawaw2#

您的服务器在响应中缺少标头Access-Control-Allow-Origin,因为它负责允许或不允许的内容。请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

相关问题