How to solve CORS error consuming an API using oboe in Angular2 app?

Question

I have API that returns data like this:

{"t":"point","id":817315,"tableid":141,"classid":142,"state":0,"loc":[6850735.34375,24501674.0039063]}
{"t":"line","id":817314,"tableid":204,"classid":2102,"loc":[[6850335.8828125,24501476.50390625],[6850341.48828125,24501476.8828125],[6850362.171875,24501492.21484375],[6850387.4140625,24501508.86328125],[6850442.66796875,24501545.69921875],[6850502.34375,24501584.0078125],[6850558.3359375,24501619.37109375],[6850611.375,24501654.73046875],[6850671.05078125,24501693.04296875],[6850708.62109375,24501687.1484375],[6850735.34375,24501674.00390625]]}

I'm trying to read this with oboe but without success. How to do this? With following code I get error in the end of this question:

    oboe('http://localhost:19100/pn/api/v1/fetch?cgid=22&north=6853000.0&east=24505000&south=6850000.0&west=24500000.0')
    .node('*', (row) => {
        console.log(row);

        return oboe.drop;
    })
    .done(() => {

        return oboe.drop;
    })
    .fail((err) => {
        // error
        console.log('oboe fail ', err);
        return oboe.drop;
    });

Access to XMLHttpRequest at 'http://localhost:19100/pn/api/v1/fetch?cgid=22&north=6853000.0&east=24505000&south=6850000.0&west=24500000.0' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. [http://localhost:4200/main]

When I get fetch with chrome headers look like this:

Request URL: http://localhost:19100/pn/api/v1/fetch?cgid=22&north=6853000.0&east=24505000&south=6850000.0&west=24500000.0
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:19100
Referrer Policy: no-referrer-when-downgrade
Content-Type: application/json
Date: Mon, 25 Feb 2019 19:55:41 GMT
Server: Microsoft-HTTPAPI/2.0
Transfer-Encoding: chunked
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: max-age=0
Connection: keep-alive
Host: localhost:19100
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36
cgid: 22
north: 6853000.0
east: 24505000
south: 6850000.0
west: 24500000.0
fetch?cgid=22&north=6853000.0&east=24505000&south=6850000.0&west=24500000.0
/pn/api/v1

This isn't related to angular or oboe. It s a CORS issue the server isn't setting `Access-Control-Allow-Origin` to `localhost:4200` or `*` so the browser is blocking it. I'd get a simple request with fetch of XMLRequest working and then try with angular and or oboe. — Wilhelmina Lohan, Feb 25 '19 at 19:01
the api works in chrome I copy pasted 2 first lines to beginning of the question. i really don't understand comment : "This isn't related to angular or oboe.". i'm trying to make angular app so everything i do is related to angular and because i just started with angular, i'm asking help here. i can do this easily with C# but that does not help here at all. — char m, Feb 25 '19 at 19:29
It is not related to angular or oboe because it has to do with accessing localhost:191100 from localhost:4200 its a browser security issue. If you made the exact request oboe is making with vanilla js you would get the same error. — Wilhelmina Lohan, Feb 25 '19 at 19:35
What does the network tab in the browser debugger look like for http://localhost:19100/pn/api/v1/fetch?cgid=22&north=6853000.0&east=24505000&south=6850000.0&west=24500000.0 ie headers, http verb — Wilhelmina Lohan, Feb 25 '19 at 19:36
both the api and app are on same machine. i must google to find out about CORS to answer. — char m, Feb 25 '19 at 19:41
ok, i can't reply to this. i don't have any control for this api at the moment. i would like to enable CORS if that is somehow possible without changing the api's code. — char m, Feb 25 '19 at 19:55
It is impossible to enable CORS without doing it in the api server's code and having it enabled is required to access localhost:191100 from localhost:4200 with the exception of "simple requests". "simple requests" have to meet certain criteria (you can google its a deep topic), if the browser is giving a CORS error like it is, it is not a "simple request" — Wilhelmina Lohan, Feb 25 '19 at 20:04
thanks @WilliamLohan! i have control for the api service tomorrow. — char m, Feb 25 '19 at 20:08

score 1 · Accepted Answer · answered Feb 25 '19 at 20:13

As mentioned by @william-lohan, this is a CORS issue. If you have control over the API host then you can enable CORS headers to allow cross-domain requests like the one that you are trying to make. However, the idea of enabling CORS should not be taken lightly as this will expose your API to several common potential XSS vulnerabilities. CORS configurations should be thoroughly tested and reviewed regularly.

As an alternative, Angular does allow you to specify the proxy configuration that is used for development mode. For example:

// package.json
...
    "scripts": {
        "start": "ng serve --proxy-config proxy.conf.js"
    }
...

// proxy.conf.js
const PROXY_TARGET = 'http://localhost:19100';
module.exports = [{
    context: ['**/api/**/*'], // May be able to get away with '**/api/**' or less here; haven't tested
    target: PROXY_TARGET,
    changeOrigin: true,
    secure: false,
    logLevel: 'debug',
    autoRewrite: true
}];

The target URI for your requests should then be changed to use the current page domain ("/pn/api/v1/...") instead of the original domain ("http://localhost:19100/pn/api/v1/...").

This will only apply when you are using development mode. If your API and UI are accessed through separate domains in any other environment then you will need to implement a solution for those environments as well, such as a reverse proxy or the aforementioned CORS.

thanks for both development mode workaround and explanation. i'm really just trying different things at this point, but in future these issues have to be taken into account. — char m, Feb 25 '19 at 21:33

How to solve CORS error consuming an API using oboe in Angular2 app?

1 Answers1

Linked