A possible cause of "...has been blocked by CORS policy" 📎
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: when a preflight request automatically initiated by the browser fails with statusapp.js:6 OPTIONS http://localhost:8080/cors-error-delete/resources/ping/duke
andAccess 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.
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.