В запросе отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
Новая
       8

В запросе отсутствует заголовок «Access-Control-Allow-Origin»

0 голосов
/ 03 октября 2018

Я прочитал много тем по этому поводу, и это все еще не работает, я схожу с ума.

У меня есть приложение Angular6 с Spring Api, и у меня продолжает появляться эта ошибкакогда я это называю: 

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

И все же я чувствую, что все сделал:

Вот мой призыв к API в Angular App: 

getGamesFromServer() {
  const httpOptions = {
    headers: new HttpHeaders({
      'Access-Control-Allow-Origin':'*'
    })
  };

  this.httpClient
    .get<any[]>('http://localhost:8080/api/rest/v1/game/progress', httpOptions)
    .subscribe(
      (response) => {
        console.log(response);
        this.games = response;
        console.log(this.games);
        this.emitGameSubject();
      },
      (error) => {
        console.log('Erreur ! : ' + error);
      }
    );
}

Вотjava-метод под названием: 

@RequestMapping(method = GET, value = "/progress")
@ResponseBody
public Response findAllAndProgress() {
    return Response.status(Response.Status.OK)
            .entity(gameService.findAllAndProgress())
            .header(ACCESS_CONTROL_ALLOW_ORIGIN, "*")
            .build();
}

Я также запустил Chrome с активированной опцией --disable-web-security, а также загрузил расширение Chrome, чтобы разрешить запрос CORS, но он не использовался

Ответы [ 3 ]

0 голосов
/ 03 октября 2018

Я предполагаю, что это потому, что приложение Angular работает в режиме разработки и обслуживается из другого порта, чем веб-приложение Spring.Это можно решить либо с помощью файла proxy.conf.json, который вы указываете при запуске приложения (ng serve --proxy-config proxy.conf.json), либо с помощью быстрого и грязного (но менее готового к работе) решения, которое вы можете добавить @CrossOrigin(origins = "*") к своим контроллерам Spring.

Причина, по которой следующий код не работает: 

@RequestMapping(method = GET, value = "/progress")
@ResponseBody
public Response findAllAndProgress() {
    return Response.status(Response.Status.OK)
        .entity(gameService.findAllAndProgress())
        .header(ACCESS_CONTROL_ALLOW_ORIGIN, "*")
        .build();
}

, заключается в том, что этот метод фактически никогда не выполняется для добавления заголовка.Запросы из разных источников инициируют предварительный запрос (HTTP OPTION) перед отправкой фактического запроса (HTTP GET в вашем случае).Это тот предполетный запрос, который терпит неудачу.Вот почему добавление аннотации к контроллеру решит проблему.

0 голосов
/ 03 октября 2018

На Java добавьте следующую строку в ваш API 

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

Вы также можете прокси-запрос с угловой стороны.Angular предоставит вам встроенный сервер, который может прокси-запрос.Выполните следующие действия:

  1. Добавьте файл proxy.config.json в корневой каталог вашего проекта.

  2. Добавьте следующий код в файл proxy.config.json

    {"/ api /": {"target": {"host": "localhost", "protocol": "http:", "port": 8080}, "secure": false, "changeOrigin": true, "logLevel": "debug"}}

  3. В файле package.json найдите start под сценариями и замените следующим:

    ng serve --proxy-config proxy.config.json

  4. Измените свой угловой код с помощью следующего кода:

    this.httpClient .get ('/ api / rest / v1 / game / progress', httpOptions).subscribe ((response) => {console.log (response); this.games = response; console.log (this.games); this.emitGameSubject ();}, (ошибка) => {console.log ('Erreur!: '+ Ошибка);});

0 голосов
/ 03 октября 2018

Создайте файл proxy.conf.json в корневом каталоге со следующим содержимым: 

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

И в файле package.json вы должны изменить стартовый скрипт с ng serve на ng serve --proxy-config proxy.conf.json

Подробнее о прокси-конфиге: Ссылка

...