如何在Angular2应用中使用双簧管解决消耗API的CORS错误? [英] How to solve CORS error consuming an API using oboe in Angular2 app?

问题描述

我有返回如下数据的API:

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

在以下位置访问XMLHttpRequest ' http://localhost:19100/pn/api/v1/fetch?cgid = 22& north = 6853000.0& east = 24505000& south = 6850000.0& west = 24500000.0 ' 来自来源" http://localhost:4200 "已被CORS政策阻止: 请求中不存在"Access-Control-Allow-Origin"标头 资源. [ http://localhost:4200/main]

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标头的内容时，如下所示:

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

推荐答案

如@ william-lohan所述，这是一个CORS问题.如果您可以控制API主机，则可以启用CORS标头，以允许跨域请求(例如您尝试发出的请求).但是，启用CORS的想法不应掉以轻心，因为这会使您的API暴露于几个常见的潜在XSS漏洞中.应该对CORS配置进行彻底的测试并定期进行审查.

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.

作为替代，Angular允许您指定用于开发模式的代理配置.例如:

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

然后应将您请求的目标URI更改为使用当前页面域("/pn/api/v1/...")，而不是原始域("http://localhost:19100/pn/api/v1/...").

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/...").

这仅在使用开发模式时适用.如果在任何其他环境中都通过单独的域访问您的API和UI，那么您还需要为这些环境实现解决方案，例如反向代理或上述的CORS.

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.

这篇关于如何在Angular2应用中使用双簧管解决消耗API的CORS错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！