# A possible cause of "...has been blocked by CORS policy"

A JavaScript client:

const deletePing = async () => {
    const config = {
        method: "delete"
    };
    const response = await fetch('http://localhost:8080/cors-error-delete/resources/ping/duke', config);
    console.log(response.status);
};
deletePing();


reports the following error: app.js:6 OPTIONS http://localhost:8080/cors-error-delete/resources/ping/duke  and

Access to fetch at 'http://localhost:8080/cors-error-delete/resources/ping/duke' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

when a preflight request automatically initiated by the browser fails with status 404.

This will happen, if a resource like:



import javax.ws.rs.DELETE;
import javax.ws.rs.Path;

@Path("ping")
public class PingResource {

    @DELETE
    public void remove() {
    }
}


exposed with:

@ApplicationPath("resources")
public class JAXRSConfiguration extends Application {}    

and with installed CORS-filter:


<dependency>
    <groupId>com.airhacks</groupId>
    <artifactId>jaxrs-cors</artifactId>
    <version>0.0.2</version>
</dependency>    


doesn't accept path params, but the JavaScript client passes them. 
In our case:
DELETE http://localhost:8080/cors-error-delete/resources/ping/duke is requested, but only http://localhost:8080/cors-error-delete/resources/ping/
is offered.


See you at Web, MicroProfile and Java EE Workshops at Munich Airport, Terminal 2 or Virtual Dedicated Workshops / consulting. Is Munich's airport too far? Learn from home: airhacks.io.