Sent Json to REST API - Access Control Allow Origin [ERROR]

Question

I want to send a json to my REST API. i tried it with Postman and it works fine. Now i want to sent Data from my frontend. I dont know where i need to add the header and how i do it. Im using Springboot for my BackEnd and Vue for my FrontEnd. My Controller:

@RestController
@RequestMapping("/api/auth")
public class FileController {

FileService fileService;

public FileController(FileService fileService) {
    this.fileService = fileService;
}

@RequestMapping(
        value = "/data",
        method = RequestMethod.POST,
        consumes = "application/json")
public void process(@RequestBody String payload) throws Exception{
    System.out.println(payload);

    try {
        FileWriter writer = new FileWriter(...);
        writer.write(payload);
        writer.close();
    } catch (IOException e) {
        e.printStackTrace();
    }
   }
 }

My main.js, which shall send the data:

const toSend ={

"name": "test",
"test1":"test2"
 };

const jsonString = JSON.stringify(toSend);

const xhr = new XMLHttpRequest();

xhr.open("POST", "http://localhost:8090/api/auth/data");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(jsonString);
console.log(jsonString)

Answer 1

You need to enable cors for this controller. There is an annotaion for that matter. Check out this guide https://spring.io/guides/gs/rest-service-cors/