reactjs 仅在DELETE请求时获取CORS问题

dm7nw8vv  于 2023-03-29  发布在  React
关注(0)|答案(1)|浏览(121)

我可以从我的ReactApp(localhost:3000)获取、发布和更新资源到我的Spring ApiRest(localhost:8080),但无法删除资源,因为CORS策略
我构建了一个迷你应用程序,试图从React应用程序中使用Spring API Rest。尝试删除资源会返回下一个错误:axios和fetchApi都发生了
访问XMLHttpRequest
'http://localhost:8080/api/borrar-producto/[object%20Object]'来自
来源“http://localhost:3000”已被CORS策略阻止:
对印前检查请求的响应未通过访问控制检查:它
没有HTTP ok状态。
这是我的控制器

@RestController
@RequestMapping("/api")
public class ProductoControlador {

@RequestMapping(path = "/borrar-producto/{id}")
public ResponseEntity<String> eliminarProducto(@PathVariable Long id) {
  servicio.borrarProducto(id);
  return new ResponseEntity<String>("Se eliminó el producto", HttpStatus.OK);
}
}

下面是配置文件:

@Configuration
public class WebConfig implements WebMvcConfigurer {

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedOrigins("*")
            .allowedHeaders("*");
  }
}

这是请求

const borrarProducto = async (id) =>{
try {
  axios.delete('http://localhost:8080/api/borrar-producto/' + id)
  .then((res) => console.log(res))
} catch (error) {
  console.log(error);
}

};
我试着把@CrossOrigin方法和参数(origins="*",methods{RequestMethod.DELETE})放在一起,也不起作用
有人能给予我点提示吗?

yhuiod9q

yhuiod9q1#

我解决了在控制器上添加这些注解的问题,即使不允许OPTIONS方法也能工作...

@CrossOrigin(origins = "http://localhost:3000", methods = {RequestMethod.PUT,RequestMethod.GET,RequestMethod.POST,RequestMethod.DELETE})

相关问题