Проблема с Access-Control-Allow-Origin при разработке веб-приложения Angular7 REST - PullRequest
Новая
       37

Проблема с Access-Control-Allow-Origin при разработке веб-приложения Angular7 REST

0 голосов
/ 02 января 2019

Я занимаюсь разработкой веб-приложения с использованием фреймворков angular7 и jersey2. Бэкэнд Java работает на tomcat9 и angular на node.js.

Мне нужно вызвать метод http post, чтобы отправить псевдоним и пароль бэкэнду и получить пользователя в ответ.

угловой код: 

constructor( private http: HttpClient ) { }

private user : User = null;

private httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
}

login( nickname : String, password : String ) {
let data = {
     "nickname": nickname,
     "password": password
}
this.http.post<User>(
     "localhost:8080/SRK/rest/users/auth",
     JSON.stringify(data),
     this.httpOptions
).subscribe((user : User) => { console.log(user); this.user = user; });

код отдыха Java: 

@Path(value = "users")
public class UserService {

   @POST
   @Path(value = "auth")
   @Consumes(MediaType.APPLICATION_JSON + ";charset=utf-8")
   @Produces(MediaType.APPLICATION_JSON + ";charset=utf-8")
   public User auth(Map<String, String> nicknameAndPassword) {
       String nickname = nicknameAndPassword.get("nickname");
       String password = nicknameAndPassword.get("password");
       return new UserController.getUserWithNicknameAndPassword(nickname, password);
   }
}

Я также пытался добавить «Access-Control-Allow-Origin»: «*» в заголовок ответа: 

@POST
@Path(value = "auth")
@Consumes(MediaType.APPLICATION_JSON + ";charset=utf-8")
@Produces(MediaType.APPLICATION_JSON + ";charset=utf-8")
public Response getUserWithNicknameAndPassword(Map<String, String> nicknameAndPassword) {
    String nickname = nicknameAndPassword.get("nickname");
    String password = nicknameAndPassword.get("password");
    return Response.ok()
                .entity(new UserController.getUserWithNicknameAndPassword(nickname, password))
                .header("Access-Control-Allow-Origin", "*")
                .header("Access-Control-Allow-Methods", "POST, GET, PUT, UPDATE, OPTIONS")
                .header("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With")
                .build();   
}

но я получаю эту ошибку в консоли браузера при вызове метода углового входа: 

 OPTIONS http://localhost:8080/SRK/rest/users/auth 403

 Access to XMLHttpRequest at 'http://localhost:8080/SRK/rest/users/auth' 
 from origin 'http://localhost:4200' has been blocked by CORS policy: 
 Response to preflight request doesn't pass access control check: No 
 'Access-Control-Allow-Origin' header is present on the requested resource.

Мой WEB-INF / web.xml содержит это: 

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

Я попытался установить плагин Chrome "access-control-allow-origin" и запустить приложение angular в chrome, но та же ошибка.

Когда я собрал угловое приложение в производство и добавил в папку WebApp, все работало нормально. Я действительно не знаю, где проблема. Я ценю любую помощь.

решаемые

Я создал proxy.config.json, включая этот: 

{
  "/rest/*":{
    "target": "http://localhost:8080/SRK",
    "secure": false,
    "changeOrigin": true
  }
}

URI в методе anglar post теперь короче: 

this.http.post<User>(
 /rest/users/auth",
 JSON.stringify(data),
 this.httpOptions
).subscribe((user : User) => { console.log(user); this.user = user; });

И я отредактировал package.json: 

"scripts": {
  ...
  "start": "ng serve --proxy-config proxy.config.json",
  ...
},

Теперь я запускаю угловое приложение по команде npm start вместо ng serve .

Спасибо за вашу помощь.

Ответы [ 3 ]

0 голосов
/ 02 января 2019

Ваш сервер должен иметь что-то вроде Access-Control-Allow-Origin: * заголовка в ответе.

0 голосов
/ 02 января 2019

Вы можете обойти это, всегда отправляя заголовок Access-Control-Allow-Origin ( Как обрабатывать CORS, используя JAX-RS с Джерси ), или вы можете включить сервер, такой как nginx, для выполнения обратного прокси-сервера для устранения ваших потребностей для заголовка

Обновление:

Извините за поздний ответ, но здесь вы найдете документацию по nginx: https://docs.nginx.com/?_ga=2.134190344.721047093.1546535765-158692192.1546535765

Кроме того, вам нужно изменить nginx.conf, чтобы включить что-то вроде этого: 

location /<location_you_wish_for_your_proxy> {
        proxy_pass <your_back_endend_server_location_including_port_and_path>;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
}
0 голосов
/ 02 января 2019

В C # мы делаем следующее.Пожалуйста, проверьте Java-эквивалент и напишите в своем коде API на стороне сервера.В файле WebAPIConfig добавьте пространство имен с помощью System.Web.Http.Cors;

Затем добавьте следующую строку кода в метод Register: config.EnableCors (new EnableCorsAttribute ("http://localhost:8080", headers:" * *).1005 * ", методы:""));

Это заставит остальной API принимать вызовы CORS.

...