Angular cors

Cross-origin resource sharing (CORS) beállítjuk fejlesztési és éles környezethez is.
Amikor a kliens és a backend nem ugyanazon az ip-n van, akkor merül fel ez a probléma. Lehet a böngészőben engedélyezni, hogy ne tiltsa le, de ugye az csak fejlesztéskor működik.
Fejlesztéskor lehet egy proxy.config.json fájlt készíteni a gyökérbe pl a package.json mellé, a következő tartalommal:

proxy.config.json 
{
  "/api/test1": {
    "target": "http://192.168.1.2:8000/test1",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  },
  "/api2/test2": {
    "target": "http://192.168.1.3:8000/test2",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Ebben a példában két api-t definiáltunk. Az angular kliens-ben csak /api/test1 néven hivatkozunk rá. A backend-en értelemszerűen http://192.168.1.2:8000/test1 url-en kell lennie a meghívandó api-nak.

Angularban hívás példa: 
this.http.get('/api2/test2/testgetfunction');

Ha készen van a proxy.json akkor így indíthatjuk, hogy a proxy.json-t is beolvassa: 
# ng serve --proxy-config proxy.config.json --host=0.0.0.0

De ha kiegszítjük a package.json fájlt így az is jó megoldás: 
    "start": "ng serve --proxy-config proxy.config.json --host=0.0.0.0",

Akkor az # npm start paranccsal indítva is már használni  tudja a beállítást.

Élesben viszont szükségünk van más megoldásra, mert a proxy.config.json nem használható.

Egy lehetőség pl az apache webszerverben beállítani a proxy-t.

A következő modulokra lehet szükség, ezeket kapcsoljuk be így: 
# a2enmod proxy
# a2enmod proxy_http
# a2enmod headers

Apache2 mappájában a sites-available mappában a vhost-nál aminél használni szeretnénk állítsuk be a <VirtualHost> tag-en belül: 
# Proxy for BaseServer
<LocationMatch "/api">
   ProxyPass http://192.168.1.2:8000/api
   Header add "Access-Control-Allow-Origin" "*"
</LocationMatch>

<LocationMatch "/api2">
   ProxyPass http://192.168.1.3:8000/api2
   Header add "Access-Control-Allow-Origin" "*"
</LocationMatch>

Apache-ot indítsuk újra és kész.

Symfony-ban is beállíthatjuk, tegyük fel a következő csomagot:
  
# composer require nelmio/cors-bundle

Majd állítsuk be az elérési utakat a config/packages/nelmio_cors.yaml fájlban:
  
nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
        allow_headers: ['Content-Type', 'Authorization']
        expose_headers: ['Link']
        max_age: 3600
    paths:
        '^/api/':
            allow_origin: ['*']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600
        '^/oauth/':
            allow_origin: ['*']
            allow_headers: ['*']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600

Olvasnivaló:
https://chriscarey.com/blog/2014/06/13/apache-proxy-with-cors-headers/comment-page-1/
https://stackoverflow.com/questions/38400168/cors-access-control-allow-origin-on-apache-proxy-issue
https://github.com/nelmio/NelmioCorsBundle
2019.02.20.