Problem CORS in Angular 2 and PHP

Question

Problem CORS in Angular 2 and PHP

Navigation

#1 by (3 votes)
#2 by (1 votes)

3

I have a REST server for queries to a database running in PHP , which via GET can be consulted several data in JSON >.

Previously there was a client on another server written in Javascript + JQuery , so I needed to use CORS to connect to that server. At that time, only the following lines needed to be added to the PHP page:

<?php
header("Access-Control-Allow-Origin: *");  
header("Content-Type: application/json");

Now I am migrating the client to Angular2 , but it turns out that trying to connect to the same server rejects CORS requests.

In principle I think it's on the server side rather than the client, but why if it worked before now it stopped working for Angular2? .

Angular requests are of this type:

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
let url = this.apiHost + '/servicios/';
return this.http.get(url, options).map(response => response.json());

php angular cors

asked by Ricardo D. Quiroga 14.08.2017 в 17:17

source

2 answers

1

I update the problem was corrected by adding the following headers

header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token");

Full I am like this:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token");
header("Content-Type: application/json");

Even so I still do not understand well what the problem really was, so that it works for one javascript + jquery and does not work for Angular 2 .

answered by 14.08.2017 в 21:15

How to make this google script work in several ranges? Repeated results in C ++

score 3 · Accepted Answer

The problem you are suffering is because the CORS specification indicates that simple requests must be met the following conditions :

The only methods accepted are:
- GET
- HEAD
- POST
Apart from the headers set automatically by the user agent (eg Connection , User-Agent , etc.), the only headers that are allowed to be set manually are:
- Accept
- Accept-Language
- Content-Language
- Content-Type
The only allowed values of the Content-Type header are:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain

Applications developed with jQuery meet these conditions, but those developed with Angular no longer $http changes the header Content-type to application/json :

The $http service will automatically add certain HTTP headers to all requests. These defaults can be fully configured by accessing the $httpProvider.defaults.headers configuration object, which currently contains this default configuration:


$httpProvider.defaults.headers.common (headers that are common for all requests):


Accept : application/json , text/plain , */*




$httpProvider.defaults.headers.post : (header defaults for POST requests)


Content-Type : application/json




$httpProvider.defaults.headers.put (header defaults for PUT requests)


Content-Type : application/json

In Spanish:

The $http service will automatically add some HTTP headers to all requests. They can be completely configured through the configuration object $httpProvider.defaults.headers , which currently contains this default configuration:


$httpProvider.defaults.headers.common (common headers for all requests):


Accept : application/json , text/plain , */*




$httpProvider.defaults.headers.post : (header by default for requests POST )


Content-Type : application/json




$httpProvider.defaults.headers.put (default header for requests PUT )


Content-Type : application/json

So, at a minimum, you must add this to your PHP code to allow such a change made by Angular:

<?php
header('Access-Control-Allow-Headers: Content-Type');

Explicitly authorizing the header Content-Type can use any value beyond the initially allowed ones ( application/x-www-form-urlencoded , multipart/form-data and text/plain ).