Angular中带路径变量的请求遭CORS策略拦截的解决咨询

核心问题：路径变量变为[object Object] #

这是因为你传入的id是对象类型，而非字符串/数字这类原始类型。当模板字符串拼接对象时，会默认调用toString()方法，得到[object Object]，导致请求路径无效（比如/api/xxx/[object Object]）。后端无法匹配这个无效路径，返回的404响应通常不会携带CORS允许头，进而触发浏览器的CORS拦截报错——这才是你看到CORS错误的间接原因，硬编码id时路径正确，后端返回正常响应并携带CORS头，所以请求能成功。

修正方法 #

1. 确保传入的是原始类型的id：
   如果你的id来自某个对象（比如从列表中选中的实体），要提取它的id属性：

   // 假设你传入的是一个item对象，结构为 { id: 123, name: 'xxx' }
   deleteItem(item: { id: number }) {
     return this.http.delete(`/api/items/${item.id}`);
   }
   

2. 主动转义路径变量（可选）：
   为避免特殊字符导致的路径问题，可使用encodeURIComponent处理：

   deleteItem(id: number | string) {
     const encodedId = encodeURIComponent(id);
     return this.http.delete(`/api/items/${encodedId}`);
   }
   

CORS配置验证 #

虽然CORS错误是路径问题引发的连锁反应，但仍需确认你的WebMvcConfig配置是否覆盖了正确的范围：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // 匹配所有/api开头的路径，包括带id的子路径
                .allowedOrigins("http://localhost:4200") // 替换为你的Angular项目地址
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 必须包含DELETE和GET
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

如果全局配置生效有问题，可临时在后端控制器方法上添加@CrossOrigin注解测试，排除配置范围的问题。

额外调试建议 #

1. 在Angular代码中打印id的类型和值，确认传入参数是否正确：

   deleteItem(id: any) {
     console.log('ID类型:', typeof id, 'ID值:', id);
     return this.http.delete(`/api/items/${id}`);
   }
   

2. 打开浏览器开发者工具的Network标签，查看请求的完整URL，确认路径是否符合预期。

内容的提问来源于stack exchange，提问作者Alessandro Bigherati