Ionic 使用 Bing Maps Proxy 失败和 Access-Control-Allow-Origin 问题

Question

我目前正在开发我的第一个混合应用程序，但我遇到了 CORS 问题。 Bing MAP API 不允许本地主机或实际设备调用其 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 :) ). No 'Access-Control-Allow-Origin' header is present on the requested resource. 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（未找到）

Answer 1

Bing Maps REST 服务是支持 JSONP 的服务。这是一篇博客 post，解释了如何使用各种 JavaScript 框架访问该服务：https://blogs.bing.com/maps/2015/03/05/accessing-the-bing-maps-rest-services-from-various-javascript-frameworks/

Ionic 使用 Bing Maps Proxy 失败和 Access-Control-Allow-Origin 问题

Ionic using Bing Maps Proxy failing and Access-Control-Allow-Origin issue

javascript

proxy

bing-maps

gulp

ionic-framework