1

I'm in the process of developing a project for my degree, one of the requirements is to display volcanic activity on google maps. However I'm having CORS issues with this resource https://volcano.si.edu/database/webservices.cfm - There is nowhere else that I can find that provides this data, all other messageboards point to this same resource, but I am stumped at it.

I'm using their sample of 100 holocene volcanoes and going direct from their example I'm using this:

$(document).ready(function(){
  $.ajax({
  type: 'GET',
  url: "https://webservices.volcano.si.edu/geoserver/GVP-VOTW/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=GVP-VOTW:Smithsonian_VOTW_Holocene_Volcanoes&maxFeatures=100",
  dataType: 'xml',
  success: function (data) {
    console.log(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
      console.log(jqXHR);
      console.log(textStatus);
      console.log(errorThrown);
    }
  });
});

Recieving this result:

Access to XMLHttpRequest at 'https://webservices.volcano.si.edu/geoserver/GVP-VOTW/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=GVP-VOTW:Smithsonian_VOTW_Holocene_Volcanoes&maxFeatures=100' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ItsPete
  • 2,363
  • 3
  • 27
  • 35
Amelia Magee
  • 452
  • 5
  • 14

2 Answers2

2

Unless you can control website configuration at https://webservices.volcano.si.edu it would be impossible to originate ajax requests, without having CORS policy (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).

A painless solution could be obtained by proxying request via server-side scripting, resident on the same Javascript domain. You can perform AJAX request to your proxy; you have to code an ASP/PHP/etc. script to perform requests to https://webservices.volcano.si.edu

alessio
  • 189
  • 1
  • 4
  • 12
1

AWS can help you with this.

  • Create an account and go to API Gateway.
  • create a new API and select your protocol and name it.
  • select the actions button, create method, select GET.
  • choose http, and plug your url in as the endpoint
  • select ations again, select enable CORS, click next and let it do it's thing
  • Deploy the API, name the stage and then use the URL it gives you to make your call from your AJAX request

so what is going to happen is you are going to call AWS-API Gateway, which will pass your request thru to the volcano endpoint. AWS will handle the CORS issues by setting the proper headers coming back on the request.

have fun !

sao
  • 1,835
  • 6
  • 21
  • 40
  • 1
    Thanks, sao. This worked for me. After following the steps you mentioned above, I used Javascript SDK generated by AWS API Gateway. – gautamlakum Sep 18 '19 at 08:21
  • really glad to help! yeah there is so much that AWS offers now, and it's either very affordable or free. – sao Sep 18 '19 at 11:28