CORS issue even if i have used @CrossOrigin at the REST API

Question

For one of our rest API created we need to allow cross origin, SO i have annotated it at our method level with @CrossOrigin

 @CrossOrigin
@PostMapping(value = "/assignbadge", consumes = { MediaType.APPLICATION_JSON_VALUE }, produces = { MediaType.APPLICATION_JSON_VALUE })
public ResponseEntity<Object> assignBadge(@Parameter(description = "Badge Assignment Input", required = true) @RequestBody final AssitTag assitTag, @Context final HttpServletRequest request) throws IBusConnectionException
{

Then i am trying this API from html and JavaSript.

Like below

fetch("https://capgt-api.eng.us.devcare*w*re.net/tagament/v1/assignbadge", {
    method: "POST",
    mode: "cors",
    headers: {
      "Content-Type": "application/json",
      "Tenant-Short-Name": "DWXENG",
      "Access-Control-Allow-Methods": "OPTIONS, GET, POST, PUT, PATCH, DELETE",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Content-Type, Authorization,Tenant-Short-Name,Accept",
      "Authorization": "Bearer eyJhb....."
    },
    body: JSON.stringify(json),
  })

But however i try with other filters also i always get preflight fail like below

I tried resolving CORS errors by adding other global filters but whatever i use i get this error. API is working in swagger and postman with the headers. Only CORS filters headers are used extra here for CORS error.I need solution to hit my API through JS

Answer 1

You need to provide origin like so (replace the url with your client's url):

@CrossOrigin(origins = "http://localhost:8080")
....