![](/img/trans.png)
[英]How to match each new line delimited json object in oboe's node-event in Angular2 app?
[英]How to solve CORS error consuming an API using oboe in Angular2 app?
我有返回如下數據的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;
});
已從來源' http:// localhost:4200 '訪問' http:// localhost:19100 / pn / api / v1 / fetch?cgid = 22&north = 6853000.0&east = 24505000&south = 6850000.0&west = 24500000.0 ' 處的XMLHttpRequest訪問 CORS政策:所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 [ http:// localhost:4200 / main]
當我獲取帶有chrome標頭的內容時,如下所示:
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
如@ 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和UI,則您還需要為這些環境實現解決方案,例如反向代理或上述的CORS。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.