如何解决在 Angular2 应用程序中使用双簧管消耗 API 的 CORS 错误？

Question

我有 API returns 这样的数据：

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

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]

当我使用 chrome headers 获取时，看起来像这样：

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 headers 以允许 cross-domain 请求，就像您尝试发出的请求一样。但是，启用 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。

如何解决在 Angular2 应用程序中使用双簧管消耗 API 的 CORS 错误？

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

oboe.js

ndjson

jsonlines

angular