时间戳

首页 > 解决方案 > CORS在javascript中阻止发布请求

javascript - CORS在javascript中阻止发布请求

问题描述

我正在使用 Javalin 制作一个 api 并尝试从 javascript 向它发送数据，但是每当我尝试这样做时都会出现 cors 错误。我可以很好地接收数据，但不能发送数据。这是我的错误：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

-----------javascript-----------

function sendOurAjax(){
    console.log("ajax using fetch")


    let ourCustomSuper = {
            "name": "SpaceMonkey",
            "superpower": "person atmosphere",
            "bounty": 0
    }

    fetch(`http://localhost:8000/api`, {
        method: "post",
        'headers': {
            'Content-Type': 'application/json',
            'BARNACLES': 'custom header value'
        },
        'body': JSON.stringify(ourCustomSuper)
    })
            .then(
                function(daResponse){
                    console.log(daResponse);
                    const convertedResponse = daResponse.json();
                    return convertedResponse;
                }
            ).then(
                function(daSecondResponse){
                    console.log("Fetch is a thing. We did it.");
                    console.log(daSecondResponse);
                }
            ).catch(
                (stuff) => {console.log("this sucker exploded")}
            )

}

------------java-----------

    app.get("/api", context ->{
        context.header("Access-Control-Allow-Origin", "*");
        context.header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
        context.header("Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token");
        System.out.println("The endpoint method has fired");
        context.result("endpoint handler has fired");
        context.json(myList);
    });

标签： javascriptjavajavalin

解决方案

为什么首先出现 CORS 错误？该错误源于浏览器实现的称为同源策略的安全机制。同源策略对抗最常见的网络攻击之一：跨站点请求伪造。在此操作中，恶意网站试图利用浏览器的 cookie 存储系统。对于域的每个 HTTP 请求，浏览器都会附加与该域关联的所有 HTTP cookie。这对于身份验证和设置会话特别有用。例如，您可以登录到像 facebook-clone.com 这样的网络应用程序。在这种情况下，您的浏览器会为 facebook-clone.com 域存储一个相关的会话 cookie： 在此处输入图像描述

这里是关于 cors 主题的链接

如何修复 CORS 错误

副手是看到你确实有

访问控制允许来源：*

访问控制允许来源：http://localhost:3000

设置但内容类型可能是错误的，即 json 类似的东西

访问控制允许来源：*

访问控制允许方法：POST、GET、OPTIONS

Access-Control-Allow-Headers：授权、内容类型

内容类型：应用程序/json

推荐阅读