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.

Zobacz kod na GitHubie i zapisz się na bezpłatny newsletter!

.

 

 


Leave a comment

Your email address will not be published.


*