Question

我目前正在学习有角度的技术，Spring Boot既可以作为服务器端也可以用作数据库，这意味着我只是在spring boot的某个类中拥有一些项目列表，可以从中获取数据，以了解如何使用它。

无论如何，我确实显示并更新了它们，它们工作正常并且很好，但是当我尝试进行删除时，它会被has been blocked by CORS policy

阻止

尽管我把这个注释放在了其余控制器的乞求上

@CrossOrigin(origins = "http://localhost:4200" )

除了删除功能，一切正常

我会全力以赴，希望你们能帮助我。.我知道文件很多，但是如果你们能给我带来任何帮助，因为我正在看教程并自己学习< / p>

我一直在获取方法不允许错误4o5

这是HTML ...

<h1>To Do List :</h1>

<div class="aler alert-warning"    *ngIf='error'> {{successMessage}} </div> 


<br>
<div class="container">
<table class="table" style="width:100%" >
        <tr>
          <th  style='background-color: gray' >ID</th>
          <th  style='background-color: gray'>ToDO</th> 
          <th  style='background-color: gray'>Date</th> 
          <th  style='background-color: gray'>Delete</th> 
          <th  style='background-color: gray'>Update</th> 

        </tr>
        <!-- enhanced forloop  for( todo todo1 : todoList ) -->
        <tr *ngFor="let todo1 of todoList">
          <td>{{todo1.id}}</td>
          <td>{{todo1.description}}</td> 
          <td>{{todo1.targetDate}}</td> 

          <td><button (click)="deleteTodo(todo1.id)" class="btn btn-warning"> Delete </button></td> 
          <td><button (click)="updateTodo(todo1.id)" class="btn btn-success"> Update </button></td> 

        </tr>

      </table>
    </div>

这是ts文件

import { Component, OnInit } from '@angular/core';
import { HardCodedAuthenticationService } from '../service/hard-coded-authentication.service';
import { TodoDataService } from '../service/data/todo-data.service';
import { connectableObservableDescriptor } from 'rxjs/internal/observable/ConnectableObservable';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';


export class Todo {
  constructor(
    private id: number,
    private username: string,
    private description: string,
    private isDone: boolean,
    private targetDate: number,
  ) { }
}



@Component({
  selector: 'app-to-do-list',
  templateUrl: './to-do-list.component.html',
  styleUrls: ['./to-do-list.component.css']
})

export class ToDoListComponent implements OnInit {

  todoList: Todo[];
  successMessage: String;

  constructor(
    private todoService: TodoDataService,
    private router: Router,
    private http: HttpClient
  ) { }




  ngOnInit() {
    // on running 
    this.todoService.retrieveAllTodos('ayman').subscribe(
      response => {
        console.log(response)
        this.todoList = response
      }

    )
  }

  // handle delete todo button 
  deleteTodo(id) {
    console.log(`deleted ${id}`);
    this.todoService.deleteTodo1('ayman', id).subscribe(
      response => {
        console.log(response);
        this.successMessage = `deleted successfully ${id}`
      },
      error => {
        console.log(error.error);
      }
    )



  }



  // handle update todo button 
  updateTodo(id) {
    console.log(`update ${id}`);
    this.router.navigate(['todos', id]);
  }
}

这是数据服务文件

// import { Injectable } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


class HelloWorldBean2{
  constructor(public message : string){}
}



@Injectable({
  providedIn: 'root'
})
export class WelcomeDataService {


  // adding HTTP Client to connect with the server .. 
  constructor(
    private http : HttpClient

  ) { }



  // http://localhost:8080/hello-world-bean 
  excuteHelloWorldBeanSerivece(){
    // <hellWorlBean2> is what response Im expecting ..
    return(this.http.get('http://localhost:8080/hello-world-bean') ) ;

  }


// http://localhost:8080/hello-world/path/ayman 

  excuteHelloWorldBeanSeriveceWithPath(name:string){
    // <hellWorlBean2> is what response Im expecting ..
    return(this.http.get(`http://localhost:8080/hello-world/path/${name}`) ) ;

  }
}

，在Spring Boot中，我已经拥有了

    package com.ayman.rest.webservices.restfulwebservices.todo;

    import java.net.URI;
    import java.sql.Date;
    import java.util.*;


    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.*;

    import org.springframework.web.servlet.support.ServletUriComponentsBuilder;



    import java.io.IOException;
    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;



    // -------- class for service ..........// 


    @CrossOrigin(origins = "http://localhost:4200" )
    @RestController
    public class todoResource {

        // injecting the static class so we can use the method findAll
        @Autowired
        private TodoHardcodedService todoService;


        //Display from server to frontend 
        @GetMapping("users/{username}/todo")
        public List<Todo> getAlltodo(@PathVariable String username) {

            return todoService.findAll();

        };



        // DELETE
        // user/{user_name}/todo/{todo-id}


        @DeleteMapping("users/username/todo/{id}")
        public ResponseEntity<Void> deleteTodo(@PathVariable String username, @PathVariable long id) {
            System.out.println("----------------------here we go--delete ---------------");
            Todo todo4 = todoService.deleteById(id);
            if (todo4 != null) {
                return ResponseEntity.noContent().build();
        }else{
            return ResponseEntity.notFound().build();
            }
        }











        //Display from server to frontend to be updated
        @GetMapping("users/{username}/todo/{id}")
        public Todo getTodo(@PathVariable String username, @PathVariable long id) {
            return todoService.findById(id);

        };


    //  update todo 
    //  Put user/{user_name}/todo/{todo-id}

        @PutMapping("users/{username}/todo/{id}")
        public ResponseEntity<Todo> updateTodo(
                @PathVariable String username, 
                @PathVariable long id ,
                @RequestBody Todo todo100) {


            Todo todoUpdated = this.todoService.save(todo100);

            return new ResponseEntity<Todo>(todo100, HttpStatus.OK);


            // or can just return todo100 and it will work fine.. 

            }

    //  create todo
    //  Post user/{user_name}/todo/


        @PostMapping("user/{user_name}/todo")
        public ResponseEntity<Void> updateTodo(
                @PathVariable String username, 
                @RequestBody Todo todo200) {

            Todo createdTodo = this.todoService.save(todo200);

            URI uri = ServletUriComponentsBuilder.fromCurrentRequest().path("/{id}").buildAndExpand(createdTodo.getId()).toUri();

            return ResponseEntity.created(uri).build();

            }


    }





    // ----------------- class todo ................//

    class Todo {

        protected Todo(){

        }




        private long id;
        private String username;
        private String description;
        private Date targetDate;
        private boolean isDone;

        public Todo(long id, String username, String description, Date targetDate, boolean isDone) {
            super();
            this.id = id;
            this.username = username;
            this.description = description;
            this.targetDate = targetDate;
            this.isDone = isDone;
        }

        public long getId() {
            return id;
        }

        public void setId(long id) {
            this.id = id;
        }

        public String getUsername() {
            return username;
        }

        public void setUsername(String username) {
            this.username = username;
        }

        public String getDescription() {
            return description;
        }

        public void setDescription(String description) {
            this.description = description;
        }

        public Date getTargetDate() {
            return targetDate;
        }

        public void setTargetDate(Date targetDate) {
            this.targetDate = targetDate;
        }

        public boolean isDone() {
            return isDone;
        }

        public void setDone(boolean isDone) {
            this.isDone = isDone;
        }

        @Override
        public int hashCode() {
            final int prime = 31;
            int result = 1;
            result = prime * result + (int) (id ^ (id >>> 32));
            return result;
        }

        @Override
        public boolean equals(Object obj) {
            if (this == obj)
                return true;
            if (obj == null)
                return false;
            if (getClass() != obj.getClass())
                return false;
            Todo other = (Todo) obj;
            if (id != other.id)
                return false;
            return true;
        }

    }

    // -------------class3
    @Service

    class TodoHardcodedService {
        private static List<Todo> todos1 = new ArrayList<Todo>();

        private static int counter = 1;

        static {
            todos1.add(new Todo(counter++, "aymanKO", "learn to dance", new Date(counter, counter, counter), false));
            todos1.add(new Todo(counter++, "Ranga", "learn to swim", new Date(counter, counter, counter), false));
            todos1.add(new Todo(counter++, "Araya", "learn to hunt", new Date(counter, counter, counter), false));
        }

        public List<Todo> findAll() {

            return todos1;
        }

        public Todo deleteById(long id) {
            Todo todo2 = findById(id);
            if (todo2 == null) {
                return null;
            }

            todos1.remove(todo2);
            return todo2;

        }

        public Todo findById(long id) {

            for (Todo todo3 : todos1) {
                if (todo3.getId() == id) {
                    return todo3;
                }
            }
            return null;
        }


        /// for the update save button 
        public Todo save(Todo todo60){

            // if there is no id or a record, then insert .. when equal to -1
            if( todo60.getId() == -1 || todo60.getId() == 0){
                todo60.setId(++counter);
                todos1.add(todo60);

            }else{
                // when having ID with values .. to update..
                // delete old one, and add the new record.
                deleteById(todo60.getId());
                todos1.add(todo60);
            }
            // return the new value..
            return todo60;

}

    }

Answer 1

尝试这样的事情：

res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, PUT, DELETE, OPTIONS"
  );

Answer 2

在CROS Config中注册您的配置，并将其放在主类中。从每个类中删除@CrossOrigin。会很好

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "OPTIONS", "DELETE", "PUT", "PATCH"));
    configuration.setAllowedHeaders(Arrays.asList("X-Requested-With", "Origin", "Content-Type", "Accept","Authorization"));
    configuration.setAllowCredentials(true);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

Answer 3

这是我建议您在前端执行的操作：

添加名称为proxy.config.json的文件

{
  "*": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

像这样ng serve proxy-config=proxy.config.json

希望这会有所帮助。

Answer 4

在项目中创建CORSFilter.java文件。

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CORSFilter implements Filter {

    /**
     * CORS filter for http-request and response
     */
    public CORSFilter() {
    }

    /**
     * Do Filter on every http-request.
     */
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "content-type");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    /**
     * Destroy method
     */
    @Override
    public void destroy() {
    }

    /**
     * Initialize CORS filter 
     */
    @Override
    public void init(FilterConfig arg0) throws ServletException {
    }
}

Answer 5

经过几个小时的调试，我很抱歉，结果我忘了包括

{username}用户名上的大括号，很抱歉为愚蠢的错误提供解决方案

正确的删除映射是这个

@DeleteMapping("users/{username}/todo/{id}")

有角删除请求被CORS政策阻止

5 个答案: