I have an issue calling web service which is in cross-domain. I've read some articles here about it, but I didn't really find a solution. I've just understood that I need the json format of the data, because I was always getting Error: Access denied. while trying to get xml data from service, but now I have a different problem. Here is my .ajax() call:
$.ajax({
type: "GET",
contentType: "application/jsonp; charset=utf-8",
url: "http://tomas/_vti_bin/EmmaService.asmx/GetResult",
dataType: "jsonp",
data: {
value : "testValue",
converstionId : "testId"
},
success: function(resp) {
alert("success: " + resp);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("error status: " + xhr.status);
alert("error status text: " + xhr.statusText);
alert("error response text: " + xhr.responseText);
},
});
From this I get error with 3 following alerts:
error status: 200
error status text: success
error response text: undefined
What I don't understand is error status text: success.
Code in my web service:
[WebMethod(EnableSession = false, Description = "Gets result")]
public EmmaServiceResult GetResult(string value, string converstionId)
{
...
return result;
}
Any suggestions on how to get this working? Thanks! :)
Try adding ?callback=? to the end of your URL:
http://tomas/_vti_bin/EmmaService.asmx/GetResult?callback=?
Also, try looking at the thrownError to determine what the error is:
alert("error response text: " + thrownError);
It could be a parsing error, etc.. something not actually related to the ajax request, but how you define how the response should be handled.
Also, look here to see how to return json from a WCF service.
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "players")]
I recently had a lot of issues at work making a cross-domain request from an AJAX call. We ended up getting it working without having to modify the API, but we did need access to the server hosting the API so we could have it send down some headers in the response. But the whole issue was a pain to debug, and I found that all browsers were terrible about reporting meaningful errors. So potentially this might not work for you and apologies in advance if this doesn't address your issue.
The solution requires you make a CORS request, and add some headers to your server response. These pages were both good resources:
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
http://www.html5rocks.com/en/tutorials/cors/
I think in your case, since you're making a basic request and you're not dealing with cookies, you can leave your .ajax call essentially unchanged, just changing dataType to "json" and contentType to "application/json" if you're sending JSON.
You'll then have to modify the server to have it handle the CORS preflight request by adding these headers to the response:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type
(See this question: jQuery CORS Content-type OPTIONS)
Hopefully this will work for you!
Related
I need to make a POST request to an external server from my webpage using Javascript. The body and response are both json. I can't figure out how to make this call or what tools to use. How do I make this call?
This is what I have so far using jQuery and ajax:
var body = '{"method":"getViews","params":{"filter":{"operator":"and","clauses":[{"operator":"matches","value":"'+ inputValue +'"}]},"order":[{"field":"name","ascending":true}],"page":{"startIndex":0,"maxItems":5}}}';
var response = $.ajax({
url: "http://" + environment + "/vizportal/api/web/v1/getViews",
method: "post",
dataType:'json',
data: JSON.stringify(body),
headers: {
'Content-Type': 'text/plain',
'X-XSRF-TOKEN' : XSRFToken,
'Cookie': 'workgroup_session_id='+workgroupSessionId+';XSRF-TOKEN='+XSRFToken
},
success:function(response){
alert("success");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
It is throwing a alerts that just says "Status:" and "Error:"
The console says this "XMLHttpRequest cannot load http://[domain]/vizportal/api/web/v1/getViews. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://[domain]' is therefore not allowed access. The response had HTTP status code 405."
Are you the owner of the destination of the call? If yes, implement the CORS headers in server-side.
If no, you can fiddle using JSONP (it bypasses CORS) or you can even implement a server-side proxy that you own to route external requests (and of course, implement CORS there).
Check out the article on CORS in MDN if you want more information : HTTP access control (CORS) on MDN
You can use JQUERY and AjAX. You can send/get information information to/from your API either by post or get method.
It would be something like that:
$("#ButtonForm").click(function(){
$.ajax({
url:(Your url),
dataType:'json',
type: 'post',
data: yourForm.serialize(),
success:function(response){
** If yout API returns something, you're going to proccess the data here.
}
});
});
Ajax:
http://api.jquery.com/jquery.ajax/
You are violating the so called same-origin-policy here. Most browsers don't allow a script to access URLs that do not have the same hostname and port than the page where the script is located. This is a very strict security policy and has often been very difficult to overcome even for testing purposes.
Traditionally the easiest way to go around this has been to use your own web site as a proxy and forward the request through it to the external server. But if you don't have enough control on your own site to implement such a solution, things have been more complicated. If you search the Internet with "same-origin-policy", you'll find a lot of discussion on the topic and other ideas to solve it.
My first suggestion would be to check the "Access-Control-Allow-Origin" that your error message mentions, though I'm not familiar with it myself. It is related to a new scheme called CORS that has been added to W3C recommendations quite recently (2014), and seems to have a wide support in the newest versions of many browsers. Maybe we developers are finally getting some tools to work with this irritating issue.
When you want to use different domain ajax call then you need to use the JSONP datatype which will allow browser to do cross domain request.
Here is more document for the JSONP : https://learn.jquery.com/ajax/working-with-jsonp/
var body = '{"method":"getViews","params":{"filter":{"operator":"and","clauses":[{"operator":"matches","value":"'+ inputValue +'"}]},"order":[{"field":"name","ascending":true}],"page":{"startIndex":0,"maxItems":5}}}';
var response = $.ajax({
url: "http://" + environment + "/vizportal/api/web/v1/getViews",
method: "post",
dataType:'jsonp',
data: JSON.stringify(body),
headers: {
'Content-Type': 'text/plain',
'X-XSRF-TOKEN' : XSRFToken,
'Cookie': 'workgroup_session_id='+workgroupSessionId+';XSRF-TOKEN='+XSRFToken
},
success:function(response){
alert("success");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
If you use jquery, use .post, or .ajax, to submit
$.post(url, data, callbackSuccess, callbackError);
more about these methods here http://api.jquery.com/jquery.ajax/
example:
var url = 'http://example.com/path/endpoint';
$.post(url, {name: 'Darlan', lastname: 'Mendonça'}, function(response){
// callback success
}, function(response) {
// callback error
});
I'm trying to make a REST call (POST) using AJAX. This is my AJAX code
<script>
var settings = {
"async": true,
"crossDomain": true,
"dataType": "json",
"url": "http://localhost:port/service/myservice",
"method": "POST",
"data": '{jsondata}',
"headers": {
"accept": "application/json",
"Authorization": "authValue"
}
}
$.ajax(settings)
.done(function (response) {
console.log(response);
});
</script>
Initially I got this error: XMLHttpRequest cannot load http://localhost:port/service/myservice. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 400.
To resolve this issue I added the following code in my dropwizard application
Dynamic filter = env.servlets().addFilter("CORS", CrossOriginFilter.class);
filter.setInitParameter(CrossOriginFilter.ALLOWED_METHODS_PARAM, "GET,PUT,POST,DELETE,OPTIONS");
filter.setInitParameter(CrossOriginFilter.ALLOWED_ORIGINS_PARAM, "*");
filter.setInitParameter(CrossOriginFilter.ACCESS_CONTROL_ALLOW_ORIGIN_HEADER, "*");
filter.setInitParameter("allowedHeaders", "Content-Type,Authorization,X-Requested-With,Content-Length,Accept,Origin");
filter.setInitParameter("allowCredentials", "true");
filter.addMappingForUrlPatterns(EnumSet.allOf(DispatcherType.class), true, "/*");
After adding this my initial exception went away, but I'm getting the following exception: XMLHttpRequest cannot load http://localhost:port/service/myservice. Response for preflight has invalid HTTP status code 400
Is this issue related to CORS? What am I doing wrong here?
UPDATE
After doing more debugging I found this behavior. When sending the request without the Authorization header I'm getting 415 (Unsupported Media Type) error.
I think something wrong with my AJAX code, can someone please help me find the issue? Thanks.
You may try here mentioned as complete answer in this thread.
$.ajax({
type:"POST",
beforeSend: function (request)
{
request.setRequestHeader("Authority", authValue);
},
url: "http://localhost:port/service/myservice",
data: "json=" + escape(JSON.stringify(createRequestObject)),
processData: false,
success: function(msg) {
$("#results").append("The result =" + StringifyPretty(msg));
}
});
try to add the following to your settings?
xhrFields: { withCredentials: true }
if you need to pass JSON data in the AJAX call, you need to specify content-type as json/application, so the server knows you are trying to send JSON data. But that will change the default content-type of the call and the call will qualify for pre-flight checking, which need proper CORS enabled client & server request.
For easier use case, do not use JSON.stringify() when you pass data, just make a simple string with {key:value, key:value, ...} format, and pass the string as the data. The Ajax call serializes the data by default and does the right thing, and the call stays as a single POST call to the server, where as the pre-flight mode is two calls.
I know that the issue already was discussed a lot. I went through the whole bunch of other SO's questions, but still has no solution.
My test case is very simple.
Requirements
I need to get authorised on httpbin.org site from my local server (localhost:63342). Basically I use http://httpbin.org/basic-auth/user/passwd to test HTTP Basic Auth.
I test Basic HTTP Authentication via jQuery.ajax function using GET request.
I need to get this done using exactly REST because actually my real goal is to get authorised via REST API request on teamcity's server which uses GET requests.
What I have done so far
Actually I tried enourmous things (worked with headers(Access-Control-Allow-Credentials, Access-Control-Allow-Origin), tried to use beforeSend function, dealt with jsonP, etc). No luck.
<html>
<head>
<script src="./jquery-1.11.0.js"></script>
</head>
<body>
<div id="target">
Click here
</div>
<script>
$("#target").click(function() {
var username = 'user';
var password = 'passwd';
$.ajax({
type: "GET",
beforeSend: function (xhr) {
xhr.withCredentials = true;
xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
},
// I know, this one is redundant
xhrFields: { withCredentials: true },
crossDomain: true,
headers: { 'Access-Control-Allow-Credentials': true },
headers: { 'Access-Control-Allow-Origin': '*' },
// this one is redundant too
headers: { 'Authorization': "Basic " + btoa(username + ":" + password) },
//contentType: "application/json; charset=utf-8",
dataType: 'jsonp',
url: "http://httpbin.org/basic-auth/user/passwd",
success: function(data, textStatus, jqXHR){
alert('success');
},
error: function(jqXHR, textStatus, errorThrown ) {
alert('failure');
},
// I don't know if I have to write it directly or not
username: 'user',
password: 'passwd'
});
});
</script>
</body>
</html>
Results I get
During all my tests I got different results. The code above causes httpbin to show auth popup window to type credentials (it's weird because I send user/pass pair in headers). Another results I've got were: UNAUTHORIZED status (which is quite understandable), "error" error message (which is meaninless), etc...
Experts of jQuery and cross-domain requesting, please help to figure out what should be done here.
P.S. I know this is highly related to CORS issue, but I tried to set Access-Control-Allow-Origin in different ways without any success.
Update:
Actually my initial goal is to be able to invoke CI job from JS code (TeamCity job via REST API using Basic HTTP AUthentication).
So, for TeamCity I believe there is a bug there (in REST API Plugin) - anyone who is interested in, please track the issue TeamCity's REST API Plugin doesn't allow to authenticate using Basic HTTP Authentication
Regarding httpbin.org - test is invalid at all.
Thanks a lot!
I use jQuery to get php-script result with ajax-function. Problem is php-script is on the another domain, so I should use "jsonp" as returned dataType, BUT php-script returns json, not jsonp (maybe script is not correct) and I get syntax error. How can I handle it? I suppose, that I can somehow get json string before ajax-function handles it and rises error, is it possible?
This is my ajax function:
$.ajax(
{
type: "POST",
dataType: "jsonp",
url: "http://www.pecom.ru/bitrix/components/pecom/calc/ajax.php",
data: res,
error: function (xhr, ajaxOptions, thrownError) {
alert("error: " + xhr.status);
},
success: function (data) {
alert("Data Loaded: " + data)
}
}
)
Thank you!
The short answer is that you can't.
The longer one is that you have to set up some sort of proxying: make the request on the server side from a machine you control, transform the results to proper JSONP there, and connect to that server via AJAX.
(Or, in the very unlikely event that the target server supports CORS, you can use that instead of JSONP.)
I've got the following problem: I need to download a JSON file from an API via JQuery / JavaScript. In theory this should be quite basic.
I tried $.ajax and all of its siblings like $.get or $.getJSON. I alway get an 200 OK but my Firebug reports an error. Printing the error just says: "error" - so not that helful.
I read that maybe the JSON file is corrupt. So I tried it with a plain text file (*.txt). Same result.
The JSON file is valid, I check it against a validator.
I also tried ContentType and dateType and experimented with json and jsonp...
I basically used something like this (with a million variations for testing purposes):
$.ajax({
url: 'http://www.myurl.com/api/v1/myfile.json',
...
success: function(data) {
console.log(data);
},
error: function(error) {
console.log(error.statusText);
}
});
Am I missing something important here? It's really odd that nothing seems to change the behavior of the AJAX-call.
In fact I don't really need AJAX because I need to grab the JSON file when loading the page...
And the JSON file is not on the same domain as the AJAX caller.
Is that URL located on the same server you're trying to get the data from?
If not, you ran into a cross-domain request, which can only be handled using JSONP. So, the JSON file itself must be compatible with JSONP format, otherwise jQuery won't be able to process it (even if you provide a 'jsonp' dataType).
P.S.: Firebug will always show response code 200 but give an empty response body for such requests
Try in this way by disabling security
$.ajax( {
type : 'GET',
contentType : "application/json; charset=utf-8",
url : surl, \\specify your url
async : false,
dataType : 'json',
headers : {
Accept : "application/json",
"Access-Control-Allow-Origin" : "*"
},
crossDomain : true,
success : SucceedFunc,
error : function(data, textStatus, errorThrown) {
console.log("error" + ' ' + JSON.stringify(data) + ' ' + textStatus + ' ' + errorThrown);
}
});
function SucceedFunc(data) {
alert("success");
}
}
Did you try to catch the error the correct way?
$.ajax({
url: 'http://www.myurl.com/api/v1/myfile.json',
success: function(data) {
console.log(data);
},
error: function(error) {
console.log(error.message);
}
});
If you are using chrome go to cmd prompt and run the chrome by disabling the security. You can disable security using pathwhere_chrome_is_located\chrome.exe --disable-web-security
and run the html page. I think this may help you.