ArcGIS Geomtry Service Configuration & Response publishing in different web App

[AnandKirti]

Hello All,
Background : I am new to ArcGIS. Currently I'm working on Migration of 1 Web Application which was build upon WebADF , Vb.Net using Ajaxcontrolles,*.acmx,*.aspx etc. Now we are migrating this Applicaiton to ArcGIS Javascript API.
Problem : When I'm using Online Geometry Service with :http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer giving me issue like following:

Issues :

1. XMLHttpRequest cannot load http://services.arcgisonline.com/ArcGIS/rest/info?f=json. Origin http://localhost:49236 is not allowed by Access-Control-Allow-Origin. mainform.aspx:1 1.  Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:235 XMLHttpRequest cannot load http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer/�?�atialReference%22%3A%7.... Origin http://localhost:49236 is not allowed by Access-Control-Allow-Origin.


2. http://localhost:49236/arcgisserver/apis/javascript/proxy/proxy.ashx?http://tasks.arcgisonline.com/A... (404 not found) -- Here I  have no proxy.aspx etc in my project

/* Map code*/
/// <reference path="esri-jsapi-vsdoc.js" />

dojo.require("esri.map");
dojo.require("esri.tasks.geometry");
dojo.require("esri.arcgis.utils");

var map, geometryService;
var LATLANGS;
var gsvc;
var xmin=-144.13584773952124;
var ymin = 7.981485927970198;
var xmax = -52.76454682003924;
var ymax = 68.8956865409582;
var wkid_base = 4326;
var fromWKID = 102113;
var toWKID = 4326; 
var gometry_url_base = "http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";
var pin_width = 16;
var pin_height = 16;
var base_center_map = [-75.67, 39.69];
var defaultZoom = 12;
var map_uiid = "basemapid";
var temp_layers = [];
function init() {
   
}
/* Runs when full document get Loaded */
//dojo.ready(init);

/* create Base Map if <map> parameter is null*/
function mapProxySettings() {
    
    esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
    esri.config.defaults.io.alwaysUseProxy = false;
    esri.config.defaults.io.corsEnabledServers.push("tasks.arcgisonline.com");
    esri.config.defaults.io.corsDetection = true;      
   
}
/* Main Function Called From DataManagerWithMap.ascx */
function rscMap(json) {
   
    createMap(json);
    var prms = transformMultiPoints(json, fromWKID, toWKID);
    var symbol = defaultSymbol();
    projectPointsOnMap(prms, toWKID, symbol,false);
    
}

/* FUNCTION FOR MARKER HIGHLIGHT*/
function rscMapselectedrows(jsonSelete) {    
    var prms = transformMultiPoints(jsonSelete, fromWKID, toWKID);
    var symbol = defaultSymbol();
    projectPointsOnMap(prms, toWKID, symbol, true);  
}
/* Responsible for Creating Base Map*/
function createMap(json) {
   
    if (map == null) {
        map = new esri.Map(map_uiid, {
            basemap: "streets",
            center: base_center_map, //long, lat
            zoom: defaultZoom
        });
        createGeometryService(gometry_url_base);
    }    
    
}
/* create geometry Service */
function createGeometryService(gmurl) {
   
    geometryService = new esri.tasks.GeometryService(gmurl);
    console.log(geometryService);
    mapProxySettings();
   
}
/*Transform Points from JSON */
function transformMultiPoints(json, fromwkid, towkid) {   
    var PrjParams = null;
    if (json) {
          if (json.points) {
             if (fromwkid != towkid) {
                var outSR = new esri.SpatialReference({ wkid: towkid });
                var mp = new esri.geometry.Multipoint(new esri.SpatialReference({ wkid: towkid }));
                mp.points = json.points;
                PrjParams = new esri.tasks.ProjectParameters();
                PrjParams.geometries = [mp];
                PrjParams.outSR = outSR;
                PrjParams.transformation = {
                    wkid: parseInt(towkid)
                }
            }
        }
    }   
    return PrjParams;
}
function projectPointsOnMap(projectionParams, towkid, symbol, selection) {
 
    if (symbol == null) {
        symbol = defaultSymbol();
    }
    if (selection) {
        symbol = highlightSymbol(); 
    }   
    if (selection ==false && map != null && temp_layers.length > 0) {
        clearLayers();
    }
    geometryService.project(projectionParams, function (outputpoint) {
        var mp = new esri.geometry.Multipoint(new esri.SpatialReference({ wkid: towkid }));
        mp.points = outputpoint[0].points;       
        mp = esri.geometry.geographicToWebMercator(mp);
        var graphic = new esri.Graphic(mp, symbol);
        var layer = new esri.layers.GraphicsLayer();
        layer.add(graphic);
        map.addLayer(layer);
        temp_layers.push(layer);       
        if (outputpoint[0].points.length > 0) {
            map.centerAndZoom(outputpoint[0].points[0], defaultZoom);          
        } else {
            map.centerAndZoom(base_center_map, defaultZoom);          
        }
    });   
}

function clearLayers() {
   
    dojo.forEach(temp_layers, function (layer) {
        map.removeLayer(layer);
    });
    temp_layers = [];    
}

/* Default Symbol Marker Green Color PIN*/
function defaultSymbol() {
    
    var symbol = new esri.symbol.PictureMarkerSymbol({ "angle": 0, "xoffset": 0, "yoffset": 12,
        "type": "esriPMS", "url": "http://static.arcgis.com/images/Symbols/Basic/SpringGreenStickpin.png",
        "imageData": "", 
        "contentType": "image/png", "width": 24, "height": 24 });
   
    return symbol;
}
/* High Light Symbol Marker Orange Color PIN*/
function highlightSymbol() {
   
    var symbol = new esri.symbol.PictureMarkerSymbol({ "angle": 0, "xoffset": 0, "yoffset": 12,
        "type": "esriPMS", "url": "http://static.arcgis.com/images/Symbols/Basic/OrangeStickpin.png",
        "imageData": "", 
        "contentType": "image/png", "width": 24, "height": 24 });
    
    return symbol;
}

auto Map XHR Request :

http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer/project?f=json&outSR=4326&inSR=4326&geometries={%22geometryType%22%3A%22esriGeometryMultipoint%22%2C%22geometries%22%3A[{%22points%22%3A[[-75.656784%2C39.560282]%2C[-75.632698%2C39.58751]%2C[-75.65255%2C39.577474]%2C[-75.686066%2C39.547535]%2C[-75.682438%2C39.54095]%2C[-75.694216%2C39.575307]%2C[-75.651307%2C39.580395]%2C[-75.6482%2C39.575169]%2C[-75.648215%2C39.549923]%2C[-75.687168%2C39.57538]%2C[-75.629991%2C39.536007]%2C[-75.699769%2C39.567282]%2C[-75.645382%2C39.543401]%2C[-75.63618%2C39.571134]%2C[-75.6197%2C39.560688]%2C[-75.627753%2C39.529639]%2C[-75.677432%2C39.560432]%2C[-75.686516%2C39.593999]%2C[-75.677395%2C39.582762]%2C[-75.674255%2C39.572248]%2C[-75.619297%2C39.553027]%2C[-75.675617%2C39.515461]%2C[-75.650513%2C39.5791]%2C[-75.63412%2C39.587994]%2C[-75.638361%2C39.5767]%2C[-75.610946%2C39.544501]%2C[-75.617597%2C39.55509]%2C[-75.66168%2C39.561739]%2C[-75.653888%2C39.521338]]%2C%22spatialReference%22%3A{%22wkid%22%3A4326}}]}&transformation=4326

Response when I copy pase above in Browser

{"geometryType":"esriGeometryMultipoint","geometries":[{"points":[[-75.656784,39.560282],.. and more}]}

How to solve this X browser access origion policy issuse?
More about configuration i need to know:
1. Do I need to run some Geometry Service? / Do I need to have any ArcGIS sever On My side while I work with JS api?
2. How to Configure Proxy?
3. I looked into http://developers.arcgis.com/en/javascript/jshelp/inside_esri_request.html and tried setting proxy.ashx c# and proxy.config wit vb.net (My project stop running and gives different error).
Please help I have 24hrs to solve this else I'll be in big trouble. I already did enough from 2 days 😞 but no success.
Waiting for your kind reply
Kirti

[ShreyasVakil]

it looks like CORS(Cross-origin resource sharing) issue just by reading the error messages. Try using this geometry service just for test purposes and see if it works:

http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer

sampleserver6 (or for that matter ArcGIS Server 10.1) is CORS enabled by dafault and if your browser is also CORS enabled this error should not pop up.

Alternatively, you can configure a proxy page to get around this issue. You can follow this tutorial to set up proxy page.

If you run into issue while configuring the proxy page see this forum link or contact Esri Support.