CORS request

Fejlesztés, programozás
1

Kicsit elakadtam Angular 5 és PHP 7 kapcsán.

API-t php-val készítem, weboldalt Angular 5-tel.
Az API korábban a domain.com/api mappában volt. míg a weboldal, ami meghívta az csak a domain.com volt.
Így ugyebár nem volt gond a CORS-szal.

Viszont most szeretném átteni a kódot: api.domain.com és editor.domain.com (korábban ez utóbbi csak domain.com volt).

És beleütköztem a CORS-ba. Nem küldi át a POST adatot a php-nak a kód.
Angular oldalról így néz ki a post küldése:

private api = 'http://api.domain.com/';
private defaultOptions = {
	headers: new HttpHeaders()
		// .append('Access-Control-Allow-Origin', 'http://api.domain.com')
		.append('Access-Control-Allow-Origin', '*')
		.append('Access-Control-Allow-Methods', '*')
		.append('Access-Control-Allow-Headers', '*')
		.append('Access-Control-Allow-Credentials', 'true')
		.append('Access-Control-Expose-Headers', '*')
		.append('Accept', 'application/json')
		.append('Content-Type', 'application/json'),
	withCredentials: true
};


//... funckioban
	let body = {
		userid: username,
		pwd: password
	};

    return this.http.post<TokenResponse>(this.api + 'auth.php?module=login', body, this.defaultOptions)

PHP oldalról ezeket a headereket küldöm vissza. De ezt már azután hogy nem érkezett meg a POST.

    private function setupHeaders() {
            header("Cache-Control: no-cache");
            header("Content-type: application/json; charset=UTF-8");
            header('Access-Control-Allow-Origin: *');
            header('Access-Control-Allow-Methods: *');
            header('Access-Control-Max-Age: 1000');
            header('Access-Control-Allow-Headers: *');
            header('Access-Control-Expose-Headers: *');
            header('Access-Control-Allow-Credentials: true');
    }

Próbáltam úgy is, hogy az Apache api conf beállításaiban adtam meg ezeket a headereket, de semmi.
Mit rontok el?

Így néz ki a kommunikáció a chrome.ban:

General:
    Request URL: http://api.domain.com/auth.php?module=login
    Request Method: OPTIONS
    Status Code: 200 OK
    Remote Address: 52.40.242.70:80
    Referrer Policy: no-referrer-when-downgrade

Response Headers:
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Headers: *
    Access-Control-Allow-Methods: *
    Access-Control-Allow-Origin: *
    Access-Control-Expose-Headers: *
    Access-Control-Max-Age: 1000
    Cache-Control: no-cache
    Connection: Keep-Alive
    Content-Length: 47
    Content-Type: application/json; charset=UTF-8
    Date: Tue, 05 Jun 2018 05:58:08 GMT
    Keep-Alive: timeout=5, max=100
    Server: Apache/2.4.18 (Ubuntu)

Request headers:
    Accept: */*
    Accept-Encoding: gzip, deflate
    Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,hu;q=0.7
    Access-Control-Request-Headers: access-control-allow-credentials,access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,access-control-expose-headers,authorization,content-type
    Access-Control-Request-Method: POST
    Cache-Control: no-cache
    Connection: keep-alive
    Host: api.domain.com
    Origin: http://editor.domain.com
    Pragma: no-cache
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

Query string paraméters:
    module: login

Bár most ahogy ezt ide leíroom, azon gondolkodom, hogy nem lehet az, hogy nem megy át egyszerre a GET és POST is?
Insomnia alól (nyilván) minden rendben van, ott azt kapom vissza az API felől, amit kell.

2

Úgy néz ki, hogy nem is az Angulárral volt a probléma, hanem a PHP-ban. Ugyanis nem kezeltem le az OPTIONS hívást először. Valamint a GET és POST egyszerre hívásával sem volt gond.

3

Figyelmedbe ajánlanám az Angular CLI Proxy funkcióját ami hasonló esetekben nyújt megoldást, főleg ha használsz DEV és PROD szervereket külön is, akár localhost-tal.

4

Köszi, a CLI-nél fejlesztés közben használom is a proxyt. Itt az éles szervernél volt csak probléma. De közben rájöttem, hogy a PHP nem kezelte le rendesen a kérést. Szóval az angular kóddal semmi baj sem volt. Sőt a headerek elküldése sem kell.

5

Amúgy megoldottam korábban, hogy az éles szerveren működjön, de most döbbentem rá, hogy most már a fejlesztés közben nem működik a proxi.
Ugyanis a /api hívásokból átkerült más domain-re az éles. Emiatt az istennek sem tudtam beállítani, hogy működjön a proxy. De igazából nem annyira nagy a probléma, mert megoldottam, hogy az enviroment fájlból veszi az api beállításokat és szépen működik is, hogy a teszt alatt az environment.ts-t használja, míg az élesnél az environment.prod.ts fájlt.