CORS在javascript中阻止发布请求答案

【问题标题】：CORS blocking post requests in javascriptCORS在javascript中阻止发布请求
【发布时间】：2021-03-25 04:57:01
【问题描述】：

我正在使用 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);
    });

【问题讨论】：

嗯，会导致 cors 的一件事是，如果您从硬盘驱动器打开您的应用程序而不是将其上传到服务器......所以您从硬盘驱动器中打开测试文件url ，但是从 localhost 调用 ajax : 8080 corse 被触发，因为 chrome 认为这是不安全的新域，就像您填写 Web 表单并且某些黑客脚本正在将表单数据窃取到 DNS 服务器一样

标签： javascript java javalin

【解决方案1】：

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

这里是关于 cors 主题的链接

How To Fix CORS Error

副手是看到你确实有

访问控制允许来源：*

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

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

访问控制允许来源：*

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

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

内容类型：application/json

【讨论】：