フロントエンド プロジェクトとバックエンド プロジェクトは、メソッド 'delete' を使用して、エラー: CORS ポリシーによってブロックされました: ... をリクエストします。

1. バックエンド部分

バックグラウンドでは@PostMappingアノテーションを使用し、投稿リクエストを通じて論理的な削除を完了します。

    /**
     * 根据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("删除失败");
    }

2. フロントエンド部

フロントエンド部分がバックエンドと通信するために使用する API は、メソッド「delete」を使用します。

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

3. 論理削除操作を行う場合

次のエラーが発生します。これは、クロスドメイン エラーとよく似ています。

 翻訳する：

オリジン「http:localhost: 9528」から「http:localhost: 9110adminedueacherremove15717511599017287」の XMLHttpRequestへのアクセスが CORS ポリシーによってブロックされました: プリフライト要求への応答がアクセス制御チェックに失敗しました: に「Access-Control-Allow-Origin」ヘッダーが存在しません要求されたリソース

実は依頼の仕方が違います。 

変更方法 1:

フロントエンド コードを変更して、メソッド: 'delete' をメソッド: 'post' に変更し、パラメータを渡して削除を渡します。これにより、フロントエンドとバックエンドの両方でポスト リクエストが行われるようになります。

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

 

変更方法 2:

バックエンドで@PostMappingを@DeleteMappingに変更します。

 このエラーはリクエストメソッドが対応していないために発生することが多いので注意が必要です！！！