Adnotacja @CrossOrigin
Adnotacja @CrossOrigin
CORS (Cross-origin resource sharing) polega na tym, że domyślnie nie można w aplikacji pod adresem app1.pl wysłać zapytania AJAXowego (asynchronicznego) do innego Origin np. app2.pl. Mechanizm ten wprowadzono celem udaremnienia prób ataków na witryny internetowe typu Cross-site Request Forgery. Atak ten polega na wysłaniu zapytania HTTP do innych serwisów wykorzystując uprawnienia użytkownika np. stan zalogowania, inne dane zapisane w sesji lub w plikach cookie. W tym artykule pokaże Ci w jaki sposób użyć adnotacji @CrossOrigin w aplikacji napisanej z użyciem Spring Boota aby skonfigurować politykę CORS. Tworzymy nowy projekt Spring Boota z użyciem Spring Initializr celem wystawienia prostego Rest API:
Plik pom.xml – niezbędne zależności:
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>com.h2database</groupId> <artifactId>h2</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.12</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> <exclusions> <exclusion> <groupId>org.junit.vintage</groupId> <artifactId>junit-vintage-engine</artifactId> </exclusion> </exclusions> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>
Model – klasa – User.java:
@Entity @Setter @Getter @ToString public class User { @Id @GeneratedValue(strategy = GenerationType.AUTO) private long id; private String name; public User() { } public User(String name) { this.name = name; } }
Repozytorium do pracy na danych – UserRepository.java:
@Repository public interface UserRepository extends CrudRepository<User, Long>{}
Klasa kontrolera – UserRestController.java:
@RestController @CrossOrigin(origins = "http://localhost:8383") public class UserRestController { private final UserRepository userRepository; public UserRestController(UserRepository userRepository) { this.userRepository = userRepository; } @GetMapping("/users") public Iterable<User> getUsers() { return userRepository.findAll(); } }
adnotacja @CrossOrigin oznacza, że można wykonywać asynchroniczne zapytania AJAX z adresu http://localhost:8383.
Po uruchomieniu aplikacji – pod adresem:
http://localhost:8081/users
(w pliku application.properties znajduje się wpis):
server.port = 8081
znajduje się przykładowe API zwracające listę użytkowników:
[{"id":1,"name":"Eric"},{"id":2,"name":"James"},{"id":3,"name":"Martin"}]
Tworzymy nowy projekt spring-boota za pomocą Spring Initializr następnie utwórzmy plik index.html o następującej zawartości:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Client</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>JavaScript Client</h1> <button id="btn">Get Users</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { const Url = 'http://localhost:8081/users'; $("#btn").click(function () { $.get(Url, function (data, status) { console.log(data); }); }); }); </script> </body> </html>
i umieśćmy go w katalogu ./resources/static. Projekt uruchamiamy na porcie 8381 co oznacza dodanie wpisu do pliku application.properties:
server.port = 8381
po jego uruchomieniu w konsoli uzyskamy komunikat:
Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://localhost:8080/users” (brakujący nagłówek CORS „Access-Control-Allow-Origin
co oznacza, że nie można wykonywać zapytań AJAX ze względu na politykę CORS. Zmieńmy teraz adnotacje CORS na:
@CrossOrigin(origins = "http://localhost:8381")
w wyniku teraz w konsoli otrzymamy pobranych użytkowników za pomocą AJAXa:
0: Object { id: 1, name: "Eric" } 1: Object { id: 2, name: "James" } 2: Object { id: 3, name: "Martin" }
Tak wygląda w skrócie mechanizm CORS.
Leave a comment