Client Side React JS post request

Question

I am trying to execute a post request to a server running on the same machine, from client rendered react application but I am getting a bunch of errors.

I have enabled a browser plugin that can mitigate the CORS issue, I have also put a temporary filter on the server-side to pass the header Access-Control-Allow-Origin: * .

I have no issue with GET requests on that matter. I am able to query the API just fine.

Unfortunately, this is not the case with POST (Please excuse my ignorance if the answer is obvious - is it even possible to make client-side post requests?)

bellow is the function that does the request and expects the result on the console.

    const postAddCategory = () => {

        const myHeaders = {host: "localhost:3000"};

        const body = {"productCategoryName": categoryName, "enabled": enabled};

        const config = {
            headers: myHeaders
        };
        axios.post("http://localhost:8080/products/categories/category/add", body, config)
            .then(r => console.log(r.data))
    }

The errors:

The interesting fact is that the request is not reaching the API at all.

I have tried several variations on the call with different headers, excluding the host header, since it is complaining about that as well. I have tried with the fetch API. No luck.

Any help would be greatly appreciated.

Thanks

edit

Even though the call is not reaching the API,

the API is build in Java (Spring Boot) and the filter is the following:

@Component
public class ForDevelopmentOnlyFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request,
                         ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;

        res.addHeader("Access-Control-Allow-Origin", "http://localhost:3000");
        chain.doFilter(req, res);
    }
}

The above works because the GET request were complaining with CORS related errors before its addition.

Answer 1

Root cause of the problem is shown by the error -

Content-type is not allowed by Access-control-allow-headers

This problem can be fixed by explicitly adding the following header to the server:

'access-control-allow-headers: content-type' on the server.

Reference:

AJAX requests from browser follow these 3 step process:

Step 1: (Pre-flight request)

Browsers asks the server for permission, using the 'HTTP OPTIONS' request. This is also called the 'pre-flight' request.

Step 2: (Server tells the options) Server responds to pre-flight request and indicates to the browser what is allowed.

This response contains following information:

• Allowed origins (Example: xyz.com, * )
• Allowed methods (Example: get, post, delete, put...)
• Allowed headers (Example: authorization, content-type, *)

Step 3: Browser checks the options provided by the server and makes the actual AJAX request, only if the options provided by the server allow it.

More information:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers