CORS blocking post requests in javascript

Question

im making an api using Javalin and trying to send data to it from javascript, however i get cors errors whenever i try to do so. i can recieve data just fine but not send data. Here is my error: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

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

Well one of the things that would cause cors is if you opening up your app from the hard drive and not uploading it to the server ... so you opening the test file from the hard drive in the url ,but calling ajax from localhost : 8080 corse is triggered as chrome thinks this is unsecure new domain its the same as if you filled in a web form and some hacker script was stealing the form data to a DNS server — JonoJames, Mar 25 '21 at 05:08

JonoJames · Answer 1 · 2021-03-25T05:49:50.437

Why was the CORS error there in the first place? The error stems from a security mechanism that browsers implement called the same-origin policy. The same-origin policy fights one of the most common cyber attacks out there: cross-site request forgery. In this maneuver, a malicious website attempts to take advantage of the browser’s cookie storage system. For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. For instance, it’s feasible that you would sign into a web app like facebook-clone.com. In this case, your browser would store a relevant session cookie for the facebook-clone.com domain:

here a link on the cors subject

How To Fix CORS Error

Offhand is see you do have the

Access-Control-Allow-Origin: *

Access-Control-Allow-Origin: http://localhost:3000

set but the content type might be wrong i.e json something along the lines of

Access-Control-Allow-Origin: *

Access-Control-Allow-Methods: POST, GET, OPTIONS

Access-Control-Allow-Headers: Authorization, Content-Type

Content-Type: application/json

CORS blocking post requests in javascript

1 Answers1