Question

我有返回如下数据的API：

                                    content            mentions
1                 Testing @cspenn @test @hi @cspenn, @test, @hi
2                           this is a tweet                    
3 this is a tweet with @mention of @twitter  @mention, @twitter

我正在尝试用双簧管阅读此书，但没有成功。这该怎么做？使用以下代码，我在该问题的结尾处得到错误：

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

在以下位置访问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]

当我获取带有chrome标头的内容时，如下所示：

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

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和UI，则您还需要为这些环境实现解决方案，例如反向代理或上述的CORS。

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

1 个答案: