Как добавить ко всем ответам заголовок «Access-Control-Allow-Origin»?

Question

Я новичок в веб-разработке и пытаюсь научиться играть в фреймворк. Для серверной части я использовал play 2.8.x framework, а для внешнего angular 8. И я сталкиваюсь с некоторой проблемой, когда пытаюсь получить ответ от сервера. Во внешней части у меня есть только одна кнопка, которая отправляет запрос на сервер (play 2 framework). Это следующий код веб-интерфейса:

import { Component } from '@angular/core';
import {HttpClient, HttpHeaders} from "@angular/common/http";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ui';

  constructor(private http: HttpClient) {
  }

  helloServer():void {
    console.log("hello from client");
    let url = 'http://localhost:9000/api/hello';
    this.http.get<String>(url, {responseType: 'text' as 'json'}).subscribe((data: String) => console.log("Response from server: " + data));
  }
}

, и на стороне сервера я обрабатываю этот запрос следующим образом:

package controllers;

import play.mvc.Controller;
import play.mvc.Result;

public class HomeController extends Controller {

    public Result index() {
        return ok("Hello from server.", "UTF-8");
    }
}

, и когда сервер отправляет ответ в браузер, который у меня есть следующая ошибка:

Access to XMLHttpRequest at 'http://localhost:9000/api/hello' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Это потому, что я отправляю запрос из другого домена. И я не хочу добавлять заголовок во все контроллеры. Я хочу добавить этот заголовок в одном месте ко всем ответам, которые будут отправлены с сервера. Как я могу это сделать?

Answer 1

Из того, что я вижу, вы хотите вызвать другой источник со страницы Angular веб-приложения: http://localhost:4200 Angular источник страницы и http://localhost:9000 источник для приложения Play Framework.

Для того, чтобы сделать это необходимо для того, чтобы веб-сервер мог принять политику CORS (перекрестный запрос). Играть обеспечьте это из коробки. Пожалуйста, смотрите для получения более подробной информации: https://www.playframework.com/documentation/2.8.x/CorsFilter

По сути вам необходимо добавить play.filters.enabled += "play.filters.cors.CORSFilter" в application.conf, и это должно работать.

Другой вариант: настроить Angular запрос сервера разработки к прокси-серверу Play для вас, поэтому вам не нужно включать CORS на стороне платформы Play. Вот хорошая статья с инструкцией: https://medium.com/better-programming/setup-a-proxy-for-api-calls-for-your-angular-cli-app-6566c02a8c4d

В этом случае вам нужно создать proxy.conf.json файл со следующим содержимым

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

Надеюсь, эта помощь!