javascript - المكالمات CORS و Google Maps HTTP API



angular google-maps-api-3 (1)

أحاول الحصول على "التحدث الزاوي" بواجهة برمجة تطبيقات Google Maps Places Autocomplete. المشكلة هي أن الخادم لا يسمح بمكالمات CORS (لا يُرجع رأس Access-Control-Allow-Origin ) كما يبدو أن مكالمات JSONP غير مجدية لأنها تُرجع JSON عاديًا وليس JSONP ، مما تسبب في حدوث خطأ في بناء الجملة.

هذا ما _jsonp حاليًا في وظيفة خدمة ( _jsonp هو كائن Jsonp ):

return this._jsonp.request(url, { method: 'GET' });

وهذا لا يعمل. تصل الاستجابة ، ولكن تعطل Angular لأنه ليس JSONP ولكن JSON.

هذا جنون. كيف يمكنني الوصول إلى هذا على الأرض إذا تم تعطيل CORS ولم تعمل مكالمات JSONP؟

https://maps.googleapis.com/maps/api/place/autocomplete/json?key=ACCESS_KEY&types=(cities)&input=ber

هل هناك طريقة لتحويل استجابة خادم JSON إلى كائن بيانات JSONP في خط الأنابيب القابل للملاحظة؟


الطريقة المدعومة للاتصال بـ API Autocomplete من أحد تطبيقات الويب تستخدم مكتبة الأماكن :

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    ...
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });
</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
  async defer></script>

وبهذه الطريقة لا يهم أن الاستجابات تفتقر إلى رأس Access-Control-Allow-Origin .

إن استخدام واجهة برمجة تطبيقات JavaScript JavaScript بهذه الطريقة — عن طريق عنصر script لتحميل المكتبة ، ثم استخدام google.maps.Map وغيرها من google.maps.* methods - هي الطريقة الوحيدة المدعومة. لا تسمح Google عن قصد بالقيام بذلك عن طريق الطلبات المرسلة باستخدام XHR أو API Fetch.





cors