英文:
Sent Json to REST API - Access Control Allow Origin [ERROR]
问题
以下是您提供的内容的翻译：
我想将 JSON 发送到我的 REST API。我已经在 Postman 中尝试过，并且运行良好。现在我想从我的前端发送数据。我不知道在哪里添加头部以及如何添加。我在后端使用 Spring Boot，在前端使用 Vue。
我的控制器：
@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();
}
}
}
我的 main.js 文件，用于发送数据：
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);
请注意，翻译内容可能会因格式和排版的不同而有细微的变化。
英文:
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)
答案1
得分: 0
你需要为这个控制器启用跨域（CORS）功能。
有一个相应的注解可以实现这一功能。
请查阅以下指南：
https://spring.io/guides/gs/rest-service-cors/
英文:
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/
答案2
得分: 0
你确定通过xhr发送是最好的解决方案吗？为什么不使用fetch？
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
你的Vue应用和Spring Boot应用运行在不同的端口上，浏览器将其视为不同的网站，这就是为什么会因为跨源资源共享（CORS）而阻止。另一个解决方案是在js端添加CORS标头，也可以在代理上进行处理。
英文:
Are you sure that sending by xhr is best solution? why don't you use fetch?
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Yours vue app and spring boot apps runs on different ports and browser sees it separate websites that why it blocks because of cors. Other solution that adding cors headers, can be proxy on js side.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论