Как решить ошибку CORS, использующую API, используя гобой в приложении Angular2?

Question

У меня есть API, который возвращает данные, как это:

{"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]]}

Я пытаюсь прочитать это с гобой, но безуспешно. Как это сделать? С помощью следующего кода я получаю ошибку в конце этого вопроса:

    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;
    });

Доступ к XMLHttpRequest по адресу ' http: // localhost: 19100 / pn / api / v1 / fetch? Cgid = 22 & север = 6853000.0 & восток = 24505000 & юг = 6850000.0 & запад = 24500000.0' из источника ' http://localhost:4200/' заблокирован Политика CORS: в запрашиваемом ресурсе отсутствует заголовок "Access-Control-Allow-Origin". [ http://localhost:4200/main]

Когда я получаю выборку с хромированными заголовками, они выглядят так:

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

Answer 1

Как упомянул @william-lohan, это проблема CORS. Если у вас есть контроль над хостом API, вы можете включить заголовки CORS, чтобы разрешать междоменные запросы, подобные тому, который вы пытаетесь сделать. Однако идею включения CORS не следует воспринимать легкомысленно, поскольку это подвергнет ваш API нескольким распространенным потенциальным уязвимостям XSS. Конфигурации CORS должны тщательно проверяться и регулярно проверяться.

В качестве альтернативы Angular позволяет вам указать конфигурацию прокси, которая используется в режиме разработки. Например:

// 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
}];

Целевой URI для ваших запросов должен быть изменен для использования домена текущей страницы ("/pn/api/v1/...") вместо исходного домена ("http://localhost:19100/pn/api/v1/...").

Это будет применяться только при использовании режима разработки. Если доступ к вашему API и пользовательскому интерфейсу осуществляется через отдельные домены в любой другой среде, вам потребуется также внедрить решение для этих сред, например обратный прокси-сервер или вышеупомянутый CORS.