在localhost上使用spring-api获取失败

Question

javascript试图从我的spring-boot api中获取数据，并返回一个"未能获取"；每次都会出错。

我确信请求到达了api，因为每次点击submit，我都会得到print语句，我把它放在get方法中，并按照它应该的方式进行记录。所以回来的路上一定出了什么问题。

获取方法：

@RestController
@RequestMapping("/familyMember")
public class FamilyController {
private FamilyRepository familyRepository;
public FamilyController(FamilyRepository familyRepository) {
this.familyRepository = familyRepository;
}

@GetMapping("/id/{id}")
public FamilyMember getById(@PathVariable("id") Long id) {
Optional<FamilyMember> optional = familyRepository.findById(id);
if (!optional.isPresent()) {
throw new ResponseStatusException(HttpStatus.NOT_FOUND);
}
FamilyMember familyMember = optional.get();
System.out.println(id); //print statement to make sure api is reached
return familyMember;
}

Javascript代码：

const url = 'http://localhost:4001/familyMember/';

submit.onclick = async() => {
const endpoint = url + 'id/' + input.value;
try {
const response = await fetch(endpoint); // error occures here because no code below is executed
output.style.color = 'green'; // to see if fetch continues(apparently it doesn't)
if (response.ok) {
output.innerHTML += await response.json(); 
}
} catch(error) {
output.innerHTML += error;  // gives me "Failed to fetch" in the html
}

我不确定错误是在服务器端还是客户端。当我在终端中使用curl时，api会给我正确的信息。。。js代码是怎么回事？

提前谢谢。

Answer 1

实际上找到了答案。在@RestController上面，我需要注释@CrossOrigin，这样api就可以允许来自不同来源的请求(在这种情况下是html文件(。

@CrossOrigin
@RestController
@RequestMapping("/familyMember")
public class FamilyController {
...

Answer 2

您应该使用类似"的地址指定交叉原点；localhost:4001"；