i got a problem in meteor when i try to make a cross origin call.
when i make the call using Ajax.
$.ajax({
type: 'GET',
url: signoutUrl,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function (nullResponse) {
console.log('success');
},
error: function (e) {
console.log('error in HTTP :: >>>>' + JSON.stringify(e));
}
});
it works fine with no problem. but when i am using meteor's HTTP.call method for the same Http request it sent me the error.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
i set the parameters and header in meteor Http.call are
HTTP.call(method, URL,
{params: {
async: false,
contentType: "application/json",
dataType: 'jsonp'},
headers:{'Access-Control-Allow-Origin':'https://www.google.com/*'}
}, function (err, result) {}
but when i check the request. i found the header is like
access-control-request-headers:access-control-allow-origin
so, help me where i am wrong in this HTTP request and how to resolve it
Related
I am using vb.net 2.0 and asp.net in my project.
I am sending ajax request from a page to get response.
$.ajax({
type: "POST",
url: "GetMyData.aspx?i=2",
data: '{ugData: \"10\"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response.d);
return false;
},
failure: function (response) {
alert("Failed");
}
});
In this code, after ajax request I can see that the variable "ugData" is in the Request Payload in Developers tool.
Can any one help me out How can i able to read this "ugData" variable value in my Page "GetMyData.aspx".
Thank You..
I can successfully make the AJAX call to my service with the following code:
var serverData = { "ZoneParent": "123" };
var request = $.ajax({
type: "POST",
url: "/./Services/Reports.svc/getZones",
contentType: "application/json",
dataType: "json",
jsonp: null,
jsonpCallback: null,
data: JSON.stringify(serverData)
});
request.done(function (msg) {
alert(JSON.stringify(msg));
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
However, when I try to implement the same call with my Kendo grid I get an error
The incoming message has an unexpected message format 'Raw'. The expected message formats for the operation are 'Xml', 'Json'
for getZones. My service call work fine with DataTables, but I want to switch to Kendo potentially. I have messed with this for days to no avail. The application is not MVC. Here is my Kendo code snippet:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/./Services/Reports.svc/getZones",
dataType: "JSON",
data: { zoneParent: "123" },
type: "POST"
},
parameterMap: function (data, operation) {
return kendo.stringify(data);
}
},
schema: {
data: "d"
}
});
var grid = $("#allGrids").kendoGrid({
dataSource: dataSource,
height: 200
});
As cfeduke made similar suggestion you can try to add contentType to the read object of the transport read config just as you did in the $.ajax call.
e.g.
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/./Services/Reports.svc/getZones",
dataType: "json",
contentType: "application/json",
data: { zoneParent: "123" },
type: "POST"
},
parameterMap: function (data, operation) {
return kendo.stringify(data);
}
},
It sounds like the server's reply "Content-type" header is something other than the expected "application/json".
You can use cURL:
curl -v -H "Content-type:application/json" -H "Accept:application/json" \
http://localhost/Services/Reports.svc/getZones
to invoke the endpoint and check the returned header values (-v is verbose, you won't see the headers without it).
Sometimes just setting an "Accept: application/json" header is enough to reveal the problem - either the server coerces the output into JSON or it throws an error that can be tracked down.
I am investigating if there is a another way around this. But seems like Kendo has many limitations and this is one of them. Datables doesn't need a header, just the JSON format.
This is what you need to add to your controller that is sending the data (in case its ajax call)
header("Content-type: application/json");
I wish it wouldn't be like this but Kendo forces this I believe. I prefer datatables, much more freedom and you can customize more.
jQuery.ajax({
type: "GET",
url: 'http://example.com/restaurant/VeryLogin(username,password)',
dataType: "json",
success: function (data) {
alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
}
});
it alerts success, but data was null. The url returns xml data, if we specify the dataType we can get the json data,but here it was not getting any data.
Any help appreciated.
Javascript is subject to the same domain policy. This means for security a JS Script in a client browser can only access the same domain as it came from.
JSONP is not subject to the same restrictions.
Check the jQuery docs on JSONP here:
http://api.jquery.com/jQuery.getJSON/
Here is a working example of using JSONP to access a cross-domain service via JQuery AJAX:
http://jsbin.com/idasay/4
And just in case JSBIN deletes this paste in the future:
jQuery.ajax({
type: "GET",
url: 'http://api.geonames.org/postalCodeLookupJSON?postalcode=6600&country=AT&username=demo',
dataType: "jsonp",
cache: false,
crossDomain: true,
processData: true,
success: function (data) {
alert(JSON.stringify(data));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
}
});
It's impossible to use Ajax to get cross-domain data directly without changing backend. It's called Same origin policy.
You can set the special header Access-Control-Allow-Origin in backend(how do to this). Or you can use JSONP.
Look for jsonp datatype.
jQuery.ajax({
type: "GET",
url: 'http://xxx.com/restaurant/VeryLogin(username,password)',
dataType: "jsonp",
cache: false,
crossDomain: true,
processData: true,
success: function (data) {
alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
}
});
here is a fantastic article to make GET and POST cross-domain call :
http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
It just helped me a lot....shoot comments for any query.
I am trying to create a cross domain request but I am getting
XMLHttpRequest cannot load [domain]/page.aspx?callback=jQuery1510773820479400456_1319466915384&_=1319466916554. Origin [domain] is not allowed by Access-Control-Allow-Origin.
here is how I make the call
$.ajax({
url: "domain/page.aspx?callback=?",
dataType: 'jsonp',
processData: false,
success: function (data) {
/*
* do something
*/
}
})
Nn server side I add the headers
Response.AppendHeader("Access-Control-Allow-Origin", "[domain]");
//I also tried Response.AppendHeader("Access-Control-Allow-Origin", "*");
Response.AppendHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
Am I missing something?
Thanks
I am simply learing Ajax with jQuery and have a simple page method that takes in a parameter and returns a string. For some reason, I am not getting the return string but I am getting to my 'success' message:
$(document).ready(function() {
$.ajax({
type: "POST",
url: "testFormMatt.aspx/sayHello",
contentType: "application/json; charset=utf-8",
data: '{"name": "matt"}',
dataType: "json",
success: function(msg) {
$.jGrowl('The web service has been successfully called');
$('#result').append(msg);
}
});
});
When you call append, you need to specify the property of the JSON object that you want to append.
So if your page is returning:
{ message: "Hello, Matt" }
Then you'd need to call append like this:
$("#result").append(msg.message);
If your page is not returning JSON, then you need to take the dataType: "json" out of the $.ajax call. The dataType parameter is for specifying the expected data type of the response, not the data type of the request.