The requested resource does not have the header "Access-Control-Allow-Origin" + The response has an HTTP status code of 401

Question

XMLHttpRequest cannot load http://192.168.1.253:8080/ ... No Access-Control-Allow-Origin header header is present in the requested resource. Origin ' http: // localhost: 4200 ' so access is not allowed. The response was an HTTP 401 status code.

A fairly common mistake, with a lot of possible solutions that did not work. I understand (I think) that CORS should work, and I don't see anything wrong with my HTTP headers, but it still doesn't work.

From Chrome:

Request URL:http://192.168.1.253:8080/...
Request Method:OPTIONS
Status Code:200 OK
Remote Address:192.168.1.253:8080
Referrer Policy:no-referrer-when-downgrade
Response Headers
Access-Control-Allow-Headers:x-requested-with,accept,content-
type,authorization
Access-Control-Allow-Methods:POST, GET, PUT, PATCH, OPTIONS, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Connection:keep-alive
Content-Length:0
Date:Mon, 15 May 2017 21:50:55 GMT
Expires:0
Pragma:no-cache
Server:...
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:authorization,content-type
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:192.168.1.253:8080
Origin:http://localhost:4200
Pragma:no-cache
Referer:http://localhost:4200/...
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

, OPTIONS Access-Control-Allow-Origin ,

angular . ,

private getObject<T>(path: string): Promise<T> {
    return this.http.get(SERVER_URL + path, this.authenticationToken())
        .toPromise()
        .then(response => response.json() as T)
        .catch(this.handleError);
}

private authenticationToken() : RequestOptions {
    let login = JSON.parse(sessionStorage.getItem('currentLogin'));
    if (login && login.authenticationToken) {
        let headers = new Headers({ 
            'Authorization': 'Basic ' + login.authenticationToken,
            'Content-type': 'application/json', 
          });
        return new RequestOptions({ headers: headers });
    }
}

, - , , . , Ember-, ,

Answer 1

HTTP 401.

401 . isnt OPTIONS . GET, .

, , OPTIONS, GET - .

, / 401. / - arent Access-Control-Allow-Origin / . , , .

; 401.

, , , , , 401 - . , , , Access-Control-Allow-Origin, .

Answer 2

, Angular Ionic, , , , , , http://localhost:4200, AJAX, , localhost:4200 , , CORS (Cross Origin Resource Sharing), , .

Proxy To Backend, URL- . :

1.- proxy.conf.js .

2. -, proxy.conf.js proxy.conf.js, , http://localhost:3000.

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }
]

module.exports = PROXY_CONFIG;

3.- package.json, "start": "ng serve --proxy-config proxy.conf.js",

4.- http://localhost:3000/endpoints/any/path/that/you/use to this ../endpoints/any/path/that/you/use ( , localhost:3000 - /endpoints).

5.- Angular : npm start; ng serve - .

, , - Angular Cli