Response to preflight request doesn't pass access control check with Angular 2

Question

I am trying to connect to an API using Angular 2. I am unable to connect to it as it is giving me a OPTIONS error as well as:

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 500.

I have the Google Chrome plugin as well as the headers. Here is the code

map.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class MapService {

    private headers = new Headers();
    constructor(private http: Http) { }



    getMarkers() {
        this.headers.append("Access-Control-Allow-Origin", '*');
        this.headers.append("Access-Control-Allow-Methods", 'GET, POST, PATCH, PUT, DELETE, OPTIONS');
        this.headers.append("Access-Control-Allow-Headers", 'Origin, Content-Type, X-Auth-Token');
        this.headers.append("Authorization", 'Bearer ' + 'mysecretcode');
        return this.http.get('https://api.yelp.com/v3/businesses/search?location=suo&limit=50', { headers: this.headers})
            .map(response => response.json());
    }

}

map.component.ts

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';

import { Marker } from '../../models/map/marker';
import { MapService } from '../../services/map/map.service';
import {Observable} from 'rxjs/Rx';
import {Http, Response, Headers } from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'map-view',
    templateUrl: 'map.component.html',
    styleUrls: ['map.component.css'],
})

export class MapComponent {

    marker: Object;

    constructor(mapService: MapService) {
        mapService.getMarkers()
            .subscribe(
                marker => this.marker = marker,
                error => console.error('Error: ' + error),
                () => console.log('Completed!')
            );
    }

I understand that this is most likely a problem with CORS. Is this something i can do to fix or is this on yelps end?

EDIT:

Here is one of the errors:

Error: Response with status: 0  for URL: null(anonymous function) @ map.component.ts:24SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.error @ Subscriber.ts:202Subscriber._error @ Subscriber.ts:139Subscriber.error @ Subscriber.ts:109Subscriber._error @ Subscriber.ts:139Subscriber.error @ Subscriber.ts:109onError @ http.umd.js:1186ZoneDelegate.invokeTask @ zone.js:262onInvokeTask @ core.umd.js:7768ZoneDelegate.invokeTask @ zone.js:261Zone.runTask @ zone.js:151ZoneTask.invoke @ zone.js:332

You have to look up the details. For instance, you need to also specify the `--user-data-dir` option, and it must be a clean, new instance of Chrome, eg there cannot be any Chrome processes running on your computer when you launch it. — , Dec 15 '16 at 19:25

score 2 · Answer 1 · edited May 23 '17 at 10:31

2

The reason for pre-flight failing is a standard problem with CORS:

How does Access-Control-Allow-Origin header work?

It is fixed by having server to set correct Access-Control-Allow-Origin.

However, the root cause of your problem could be in misconfiguration of your server or your client, since 500 is the server internal error. So it might not be accessing intended server code, but some generic handler in apache or whatever is hosting the service. Most of the generic error handlers dont provide CORS support as default.

Note, if you are using REST API, 500 is not a code you should see in a successful API use scenario. It means that the server is not capable of handling the request properly.

Maybe this link would have relevant information: EXCEPTION: Response with status: 0 for URL: null in angular2

edited May 23 '17 at 10:31

Community

1
1

answered Dec 15 '16 at 18:51

Vladimir M

4,403
1
19
24

Thanks for the quick response. I have tested the URL with the authentication on Postman and got results back. Do you think it could possibly be the server? – Lewis Menelaws Dec 15 '16 at 18:55
500 is internal server error code. Depending on your architecture, it could be originated from your own server code or server framework or from some web server that does the proxying for you. Still, it is that server component that does reports an error and does not set the headers in response. What does the error data contain? – Vladimir M Dec 15 '16 at 18:58
I added the error in my post. I see a lot of "Subscriber" errors. Do you believe that can be it? – Lewis Menelaws Dec 15 '16 at 19:05
Thanks for helping me narrow down the error. Am I using the subscribe function wrong? – Lewis Menelaws Dec 15 '16 at 19:10
Myself I havnt been using this so I probably cannot help much more. What is the server end you are using? Similar problem was reported here: (http://stackoverflow.com/questions/38286250/exception-response-with-status-0-for-url-null-in-angular2) – Vladimir M Dec 15 '16 at 19:18
I am just using Angular that runs off of a local server. Should I connect it with node or something? – Lewis Menelaws Dec 15 '16 at 19:22
you should check your resource configuration. see the link I've added. – Vladimir M Dec 15 '16 at 19:24

Response to preflight request doesn't pass access control check with Angular 2

1 Answers1