Ionic 使用 Bing Maps 代理失败和 Access-Control-Allow-Origin 问题答案

【问题标题】：Ionic using Bing Maps Proxy failing and Access-Control-Allow-Origin issueIonic 使用 Bing Maps 代理失败和 Access-Control-Allow-Origin 问题
【发布时间】：2016-05-13 00:33:50
【问题描述】：

我目前正在开发我的第一个混合应用程序，但我遇到了 CORS 问题。 Bing MAP API 不允许 localhost 或实际设备调用其 Rest API。我尝试通过两种不同的方式联系 Bing。

第一次尝试是使用我的服务中的 url，所有 url 都在 config.xml 中列入白名单，但我到达并出错。

二是代理url，也就是查询url。我不知道如何代理查询 url，所以我一直在使用重新格式化的测试 url，但一直得到 404。

有人知道如何解决我的 CORS 问题吗？提前谢谢你

'方法 1`

service.js

  function getUserAddress() {

            var uriQuery = http://dev.virtualearth.net/REST/v1/Locations/point?point=40.444009, -77.774055&includeEntityTypes=Address,Neighborhood,CountryRegion&includeNeighborhood=1&output=json&key=(removed);

            return $http({
                method: 'GET',
                url: uriQuery,
            }).then(function (response) {
                console.log("location data set", response);
                return getNearbyEvents(response);
            }).catch(rxEventsService.onRequestFailure);
        }

Config.xml

<access origin="*"/>
<allow-navigation href="*"/>

Error in Chrome

XMLHttpRequest 无法加载 http://dev.virtualearth.net/REST/v1/Locations/point?point=40.444009,-77.77405&include...=json&key=(remove :) )。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:8080' 不允许访问。响应的 HTTP 状态代码为 404。

Approach 2

gulp.js

// webserver: Create local webserver with livereload.
gulp.task('webserver', function () {
    gulp.src('./www')
        .pipe(webserver({
            fallback: './www/index.html',
            host: '0.0.0.0',
            port: 8080,
            proxies: [{
                source: '/_bingmaps',
                target: 'http://dev.virtualearth.net/REST/v1/Locations/point?point=40.444009, -77.774055&includeEntityTypes=Address,Neighborhood,CountryRegion&includeNeighborhood=1&output=json&key=(removed)'
            }]
        }));
});

constants.js

(function () {
    'use strict';

    angular.module('rxEvents').constant('rxUrls', {

        reverseGeoCoding:'/_bingmaps',       
        bingMapsKey:'(removed)'
    });
})();

service.js

  function getUserAddress() {

            return $http({
                method: 'GET',
                url: rxUrls.reverseGeoCoding,
            }).then(function (response) {
                console.log("location data set", response);
                return getNearbyEvents(response);
            }).catch(rxEventsService.onRequestFailure);
        }

Error ionic.bundle.min.js:135 POST http://localhost:8080/_bingmaps 404（未找到）

【问题讨论】：

标签： javascript proxy ionic-framework gulp bing-maps

【解决方案1】：

必应地图 REST 服务是启用 JSONP 的服务。这是一篇博客文章，解释了如何使用各种 JavaScript 框架访问此服务：https://blogs.bing.com/maps/2015/03/05/accessing-the-bing-maps-rest-services-from-various-javascript-frameworks/

【讨论】：