I am getting an error that i dont understand an cannot find any helpfull informations about:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https:*******' is therefore not allowed access. The response had HTTP status code 401.
function RecordTheCall()
{
var key = '*******************';
$.get( "https://api.plivo.com/v1/Account/"+key+"/Call/?status=live", function( data ) {
var callUuid = data.call_uuid
});
$.ajax({
url: "https://api.plivo.com/v1/Account/"+key+"/Call/"+callUuid+"/Record/",
type: "POST",
data: { 'auth_id': auth_id, 'call_uuid': CallUUID },
dataType: "json",
success: function (res) {
alert(res);
},
error: function(err) {
alert(err);
}
});
}
Call recording cannot be accomplished from the Web SDK directly. You cannot use the Plivo API from your Web browser using Javascript because cross-domain ajax requests are not allowed in browsers for security reasons.
This has been explained in this Wikipedia article. There are some work arounds to overcome this, but it is browser dependent and hence it might not work always. Instead you should use the Plivo XML/API in you application.
Related
I'm making a request from client side to a web-API on different domain to extract data in JSON format. How do I enable Cross Origin Resource Sharing(CORS)?
Client runs on https while my web-API runs on http.
This is the AJAX call that I'm making :
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://map.techriff.in/api/values",
success: function (json) {
console.log(json);
},
error: function (err) {
console.log(err);
}
});
});
This site helped me when I had an issue with Chrome showing the following error: "No 'Access-Control-Allow-Origin' header is present on the requested resource"
Go down to the section titled "Enable CORS".
https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
Note, I used the following attribute syntax as opposed to what was listed in the site above:
[EnableCors("http://localhost:1616", "*", "*")]
You need to add the Access-Control-Allow-Origin: http://domain.com to your response header, where domain.com is replaced with the domain you want to allow (don't use * wildcards).
How you do this depends one your server stack. In ASP.NET:
Response.AppendHeader("Access-Control-Allow-Origin", "http://domain.com");
You then need to set $.support.cors = true in your jQuery to enable it on the client.
Add $.support.cors = true; somewhere before to make your $.ajax call.
Source: Is it safe to use $.support.cors = true; in jQuery?
Assuming you correctly set the Access-Control-Allow-Origin header on the server as well.
CORS jQuery AJAX request
First of all, this is a big issue. Everyone will say you have to enable CORS in the server. What if we are requesting an API?. What I did is.
Step 1: Make an ajax call to my own server.
Step 2: Make https request from my server to the API.
Step 3: Send the result to the ajax.
My AJAX call.
$.ajax({
type: "POST",
url: "makepay",
data:{
key:value
},
success: function(response) {
//place to handle the response
},
error: function() {
//place to handle the error
}
});
My server page
const https = require('https');
app.post('/makepay',function(req, res){
var options = {
host: "Site address",
path: "Path",
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
var req = https.request(options, (resp) => {
resp.on('data', (xmlresponse) => {
res.send(xmlresponse);
}}
req.write(parameters_to_the_API);
req.end();
});
I hope you will get at least the idea.
Im trying to access gisgraphys api with this code:
$('[id$=PlaceOfDeparture]:not(.ui-autocomplete-input)').live('focus', function() {
$(this).autocomplete({
source: function (request, response) {
$.ajax({
type: 'POST',
datatype: 'jsonp',
url: 'http://services.gisgraphy.com/fulltext/fulltextsearch?q='+ request.term,
//data: {
// q: request.term
//},
success: function(res) {
console.log("Success: " + res);
},
error: function(res) {
console.log("Error: " + res);
}
});
}
});
});
when i do that i get error:
XMLHttpRequest cannot load http://services.gisgraphy.com/fulltext/fulltextsearch?q=viborgsslingan. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'mylocalhost' is therefore not allowed access.
if i press the link i get the xml in the browser just as i want it. Somehow it wont get to my code. Ive search a bit about the problem but it seems to be a security problem on the gisgraphy server... Is there anything i can do to make this cross-domain access work?
Ive search a bit about the problem but it seems to be a security problem on the gisgraphy server...
It’s not a security problem, rather the other way around. The Same Origin Policy forbids you from requesting data from other domains in JS via AJAX, unless the remote domain signals that it wants to explicitly grant you access (this is called CORS).
If the service you are accessing doesn’t offer that, and no other format that is not restricted by the SOP – like f.e. JSONP – then you can not get that data client-side via JavaScript.
Below is a cross-domain call I'm trying to make via an Ajax call. The web service we're using only returns XML, so I cannot use jsonp as a dataType. As I have it written below, I receive the following error in Chrome's debugger:
Uncaught ReferenceError: Request is not defined
Here is the code:
function GetProgramDetails() {
var URL = "http://quahildy01/xRMDRMA02/xrmservices/2011/OrganizationData.svc/AccountSet?$select=AccountId,Name,neu_UniqueId&$filter=startswith(Name,\'" + $('.searchbox').val() + "\')";
var sourceDomain = Request.Headers["Origin"];
var request = $.ajax({
type: 'POST',
beforeSend: function(request){
request.setRequestHeader("Access-Control-Allow-Origin", sourceDomain)
},
url: URL,
contentType: "application/x-www-form-urlencoded",
crossDomain: true,
dataType: XMLHttpRequest,
success: function (data) {
console.log(data);
alert(data);
},
error: function (data) {
console.log(data);
alert("Unable to process your resquest at this time.");
}
});
}
EDIT
I've tried the following versions of this code and haven't seen anything different in the error message. This is being used in an enterprise environment, so is it possible that, due to security features on the server, it is not possible for this to work? I'm brand new to Ajax, so I don't know if this is something that works 100% of the time or just in a majority of settings.
beforeSend: function (request) {
request.setRequestHeader("Access-Control-Allow-Origin: *")
},
beforeSend: function (request) {
request.setRequestHeader("Access-Control-Allow-Origin: ", "http://localhost:55152")
},
beforeSend: function (request) {
request.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:55152")
},
beforeSend: function (request) {
var sourceDomain = request.Headers["http://localhost:55152"];
request.setRequestHeader("Access-Control-Allow-Origin: ", sourceDomain)
},
beforeSend: function (request) {
var sourceDomain = location.protocol + '//' + location.host;
request.setRequestHeader("Access-Control-Allow-Origin: ", sourceDomain)
},
This is your problem: var sourceDomain = Request.Headers["Origin"]; You have not defined Request with a capital R.
The meat of your problem is going to be in the cross-domain request. This is possible and you're on the right track but Access-Control-Allow-Origin is something that's set on the server as a response header, not something that's sent by the client through XHR as a request header. See https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Access-Control-Allow-Origin
See the HTML5 Boilerplate .htaccess as an example of how to set this up on Apache https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess and note the browser limitations https://www.bionicspirit.com/blog/2011/03/24/cross-domain-requests.html - notably that this doesn't work in IE7 and that IE doesn't support wildcards *.
Trying to mimic jsonp (returning executable JavaScript code from the server) may be possible with some clever coding but this would be more difficult - Using JSONP when returning XML
Also, if the data is sensitive then you might not want to do any sort of cross-domain request without a private key scheme since I'm not sure if the origin request header can be spoofed. The alternative would be to set up a connection for your websites to share data on the back-end rather than the front-end.
Also, JavaScript function names are not capitalized unless they are constructors.
beforeSend: function(request){
var sourceDomain = request.Headers["Origin"];
request.setRequestHeader("Access-Control-Allow-Origin", sourceDomain)
},
You were attempting to access the request before it was created, thus throwing the undefined error. The request is the jqXHR object which is passed to the beforeSend() callback function.
I want to retrieve some data using $.ajax from the external ASP.NET MVC site (in this case - from my site). The code below geive me a 404 Not Found error (of course the url is valid.
But, if I change the url from url: 'http://myurl.com/Home/GetMyCode/?id=mycode' to url: 'http://localhost:123/Home/GetMyCode/?id=mycode' everything is fine. So, how to fix it ?
$.ajax({
url: 'http://myurl.com/Home/GetMyCode/?id=mycode',
type: 'POST',
contentType: "application/json; charset=utf-8",
crossDomain: true,
success: function (res) {
...
},
error: function (jqXHR, textStatus, errorThrown) {
...
}
});
[HttpPost]
public JsonResult GetMyCode(string id)
{
try
{
return Json(new { result = "ok", resultData = "OK") });
}
catch (Exception e)
{
return Json(new { result = "error", resultData = "An error occured" });
}
}
Two Methods for Handling Cross-Domain Ajax Calls:
JSONP: The Current Standard for Cross-Domain Access
JSONP is a convention used by some sites to expose their content in a way that makes it easier for callers to consume data via script, even from an external domain. The trick consists in having the site return some JSON content not as a plain string but wrapped up in a script function call. For more details..
http://www.west-wind.com/weblog/posts/2007/Jul/04/JSONP-for-crosssite-Callbacks
http://www.jquery4u.com/json/jsonp-examples/
Cross-origin resource sharing (CORS)
To enable cross-domain requests in environments that do not support cors yet but do allow cross-domain XHR requests (windows gadget, etc), set $.support.cors = true;
You just tell jQuery that you're in an environment where Cross-Domain XHR requests are possible.
In order to retrieve data crossdomain, you probably need to use 'jsonp'
Looks like it might be a DNS issue. Are you able to get to: http://myurl.com ?
Is the .com domain you are trying to access publicly accessible? Or is it a loopback to localhost?
that tutorial worked for me, I had to implement the JSONP handling in my MVC project. http://www.codeguru.com/csharp/.net/net_asp/using-jsonp-in-asp.net-mvc.htm
This function is working on Chrome and Firefox but not on IE9, where errorHandler is logging this error message:
ERROR: getFriendsArray {"readyState":0,"status":0,"statusText":"No Transport"}
getUserAccessToken() is returning the right value. Any ideas what could it be, that only affects IE?
EDIT: seems that https://graph.facebook.com/me/friends directly on IE browser returns HTTP 400 error.
function getFriendsArray() {
var friendsArray = [];
$.ajax({
url: 'https://graph.facebook.com/me/friends',
data: {
access_token: getUserAccessToken(),
fields: 'name,picture,gender'
},
dataType: 'json',
cache: true,
async: false,
success: function(response) {
var data = '';
$.each(response.data, function(indice, item) {
friendsArray.push(item);
});
},
error: function(err) {
errorHandler('getFriendsArray', JSON.stringify(err));
}
});
return friendsArray.sort(sortByName);
}
$.ajax only supports using XMLHttpRequest or XDomainRequest (IE), the latter only supporting a few scenarios, and requiring that your page is SSL if the requested resource is SSL.
Instead, use FB.api, which handles this and much more, ensuring that the call makes it through, either by using JSONP, XHR, XDomainRequest, or Flash.