Angular 2 access redmine Rest Api, no 'Access-Control-Allow-Origin'

Question

I try to get issues from redmine via them Rest Api. When I call it from Postman I get response, but when I do it from my angular App I get such error

OPTIONS https://redmine.ourDomain.net/issues.json 404 (Not Found) XMLHttpRequest cannot load https://redmine.ourDomain.net/issues.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.

Its how I do it in Angular

login(user: User): Observable<boolean> {
    var headers: Headers = new Headers();
    headers.append("Authorization", "Basic " + btoa(user.login + ":" + user.password));
    let options = new RequestOptions({ headers: headers });
    return this.http.get("https://redmine.ourDomain.net/issues.json", options)
        .map((response: Response) => {
            debugger;
            if (response.status == 200) {
                // set token property

                // store username and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify({ user }));

                // return true to indicate successful login
                return true;
            } else {
                // return false to indicate failed login
                return false;
            }
        });
}

And there how request looks in my browser

See: http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource — Dmitrij Kuba, May 15 '17 at 20:32
I enabled CORS in chrome but now i get such error **Response for preflight has invalid HTTP status code 404** — Stefan, May 15 '17 at 21:09

score 1 · Answer 1 · answered May 15 '17 at 21:47

1

You'll need to enable CORS access on the backend: http://www.redmine.org/plugins/redmine_cors

Here's a nice extension that will let you test frontend code outside of normal CORS restrictions. It's strictly for testing and won't help a production app, but nice to have: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

answered May 15 '17 at 21:47

joh04667

7,159
27
34

I just use this extension and I still get error **Response for preflight has invalid HTTP status code 404** – Stefan May 15 '17 at 21:50
1

The extension is only for front-end CORS restrictions enforced by the browser. You need to configure your backend to allow CORS, or configure headers to send with the request that the backend will accept. – joh04667 May 15 '17 at 21:53
But I do not know which headers they want and I cant reach this link to them page which you post. – Stefan May 15 '17 at 21:59
1

There's no way around it. It's a Web standard. Sorry you can't access the link, but you should Google Redmine CORS or look through their documentation. – joh04667 May 15 '17 at 22:04
1

Thanks for your effort, I always have a problem with them page at night it's nothing wrong with your link so i will check in the Morning. – Stefan May 15 '17 at 22:10

score 1 · Answer 2 · answered May 30 '17 at 12:19

CORS must be set up in the backend. Please note that is NOT a good practice to allow all origins Access-Control-Allow-Origin: '*' and that you will need to specify the other headers as well:

Access-Control-Allow-Methods: GET, OPTIONS Access-Control-Allow-Headers: authorization.

Angular 2 access redmine Rest Api, no 'Access-Control-Allow-Origin'

2 Answers2