角9前端/ calling引导后端--如何在调用router.navigate(url)时解决CORS错误

Question

我有棱角的前端和Springboot后端。

我的Springboot控制器被注释为@CorsOrigin，如下所示，根据我的读取，它将在此控制器的所有端点上启用CORS；但是，由于某些原因，情况并非如此：

@CrossOrigin(origins = "http://localhost:4200") // to prevent CORS error in Angular, use url of Angular app
@RestController
@RequestMapping("/api/v1/")
public class EmployeeController {

    @Autowired
    private EmployeeRepository employeeRepository;
    
    @GetMapping("/employees")
    public List<Employee> getAllEmployees() {
        return employeeRepository.findAll();
    }
    
    @PostMapping("/employees/add")
    public Employee createEmployee(@RequestBody Employee employee) {
        return employeeRepository.save(employee);
    }
}

我的9角前端将使用一个表单来创建新员工。在表单提交时，我调用onSubmit，它调用saveEmployee，它调用goToEmployeeList

  onSubmit() {
    console.log(this.employee);
    this.saveEmployee();
  }

 saveEmployee() {
    this.employeeService.createEmployee(this.employee).subscribe(data => {
      console.log(data);
      this.goToEmployeeList();
    },
    error => console.log(error));
  }

  /* Once we add new employee, we want to navigate to employee list, so we add new method
     here to use router for that. */
  goToEmployeeList() {
    this.router.navigate(['employees']);
  }

但是，当我在表单中输入员工信息并单击Submit按钮时，就会得到CORS错误：

​

我如何解决这个问题？

Answer 1

我试图结束这个问题，但由于“Geeth试图帮助和回答”(非常感谢@Geeth)，我没能回答。

问题是我这方面的疏忽。我在我的角度应用程序中有基本URL的服务，如

"http://localhost:8080/api/v1/employee"

正确的URL是

"http://localhost:8080/api/v1/employees"

这解决了上述问题。谢谢

Answer 2

最后，您应该删除@RequestMapping中的"/“。应该是@RequestMapping("/api/v1")。尝尝这个。因为您的API端点以"/“开头。