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

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

0 голосов
/ 25 февраля 2019

У меня есть 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&north=6853000.0&east=24505000&south=6850000.0&west=24500000.0' из источника' http://localhost:4200' заблокирован CORSpolicy: в запрошенном ресурсе отсутствует заголовок «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

1 Ответ

0 голосов
/ 25 февраля 2019

Как уже упоминалось @ 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.

...