Angular2 http.get preflight issues

Question

I am currently using angular2's HTTP to POST and GET data from my custom api.

The API is in PHP and the end points etc have been tested and work fine.

The issue I am getting is any time I set the GET Authorization header, I get the following error message in Chrome console:

Response for preflight has invalid HTTP status code 404

I have set my API's headers to allow access from remote origins with the following:

header("Access-Control-Allow-Origin: http://localhost:3000");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: GET, POST, PUT, PATCH ,DELETE");
header("Access-Control-Allow-Headers: Authorization, Content-Type");

Yes I am running my angular project on localhost, I have a POST request that happens without the Authoriazation header set and it works fine, I have also removed the Authorization header from my GET request and it then works fine (But that end point needs the Authorization header to send my JWT to my API)

Am I doing something wrong? Should I be settings other headers, I have tested the endpoint in Postman and all is working fine.

EDIT

I have also edited my Hosts file to have a tld point to my local and also one for the API which is an IP on my local machine....

So my origin is: website.com My API: api.website.com

I have changed my Access-Control-Allow-Origin: http://website.com:3000

Try to replace http://localhost:3000 with your system's IP address like for ex. 192.168.37.25:3000. It may works because when you use localhost then API points to its local system. So, this may cause problem if you are accessing from different PC. — Hardipsinh Jadeja, Aug 04 '16 at 05:51

score 2 · Accepted Answer · answered Aug 04 '16 at 07:39

I found the issue.

My router was only accepting $_POST and $_GET methods,

Chrome sends a OPTIONS method before sending the POST or GET to confirm the Origin.

For now I have just added:

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS");
    header("Access-Control-Allow-Headers: Authorization, Content-Type,Accept, Origin");exit;
}

So now when a OPTION request comes through it just returns the headers that are needed to allow my POST and GET requests

score 0 · Answer 2 · edited May 23 '17 at 12:25

The easiest way to handle this if you have control of the responding server is to add a response header for:

Access-Control-Allow-Origin: *

This will allow cross-domain Ajax. In PHP, you'll want to modify the response like so:

<?php header('Access-Control-Allow-Origin: *'); ?>

You can just put the Header set Access-Control-Allow-Origin * setting in the Apache configuration or htaccess file. It just work like a charm.

From the comments, this is an important note: the wildcard is going to allow any domain to send requests to your host. I recommend replacing the asterisk with a specific domain that you will be running scripts on. While you are going to live.

refer Origin is not allowed by Access-Control-Allow-Origin

This does not work... Both in the NGINX config and using this header php function. Same issue as above — Joshua Lawson, Aug 04 '16 at 06:09

Angular2 http.get preflight issues

2 Answers2