前后端项目使用method: ‘delete‘请求报错:has been blocked by CORS policy: ...

一、后端部分

后台使用的是@PostMapping注解,就是通过post请求完成逻辑删除的

    /**
     * 根据id删除
     */
    @ApiOperation(value="通过id删除",notes = "逻辑删除")
    @PostMapping("remove/{id}")
    public R removeById(@ApiParam(value = "xxx",required = true)@PathVariable  String id){
        System.out.println("进入删除方法");
        Boolean result=tsService.removeById(id);
        if(result){
            return R.ok().message("删除成功");
        }
        return  R.error().message("删除失败");
    }

二、前端部分

前端部分与后端通信的Api使用了method:‘delete’

    /**
     * 通过id删除信息
     * @param {*} id 
     */
     deleteTeacherById(id) {
        return request({
          url: `/admin/edu/teacher/remove/${id}`,
          method: 'delete',
      
        })
      } 

三、进行逻辑删除操作时

就会发生下面这种错误,看着跟跨域的很像

 翻译一下:

从源“http:localhost:9528”访问“http:localhost:9110adminedueacherremove15717511599017287”处的 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:没有“Access-Control-Allow-Origin”标头存在于请求的资源上

其实就是请求的方式不一样的 

修改方式一:

修改前端代码把method: 'delete'改成 method: 'post', 再通过传递参数的方式把delete传过去,这样子就保证了前后端都为post请求

    /**
     * 通过id删除信息
     * @param {*} id 
     */
     deleteTeacherById(id) {
        return request({
          url: `/admin/edu/remove/${id}`,
          method: 'post',
          params:{
            method:'delete'
          }
        })
      }

修改方法二:

在后端把@PostMapping改成@DeleteMapping

 出现这个错误往往就是这个请求方式没有对应上,还是要细心一点!!!

猜你喜欢

转载自blog.csdn.net/m0_56233309/article/details/126982691