I have a Mule flow and I'm trying to send custom request headers using an AJAX call from html files placed on my system (html files are not on the server).
The following code doesn't work:
$("#submit").click(function(){
$.ajax({
url: "http://localhost:8081",
crossDomain: true,
headers: {
Accept : "text/plain; charset=utf-8",
"Content-Type": "text/plain; charset=utf-8",
"myHeader" : "myHeaderValue"
},
method: 'GET',
data: { hello : "hello" }
}).complete(function(data) { alert(data); });
});
I've tried using async:false, cache:false, content-type etc but nothing works. All I get from Mule is this:
I've added this in the Mule-flow but it still doesn't seem to work:
<set-property propertyName="Access-Control-Allow-Origin" value="*" />
I've tried hitting the same flow from Java code, Python, Postman and the same header from all sources was received in Mule with value, but AJAX it fails on.
Thanks.
Related
I am trying to make an AJAX request from my client to my NodeJS/ExpressJS backend.
However, when the request is fired, my backend receive it well but doesn't recognize the custom headers . e.g.
$.ajax({
type: "POST",
url: "/foo",
headers: {"authorization": "Bearer 12345"},
data: formData,
dataType: "json",
encode: true,
})
in Node , when I do req.headers['authorization'] I get undefined.
I don't understand what I did wrong.
Any advice ?
I'm not sure whether the request you're making is cross-url or not, but if it is try the following:
$.ajax({
url: "yoururl",
type: "GET",
dataType: 'json',
xhrFields: {
withCredentials: true // edited
},
//...
});
I ran into the same error a few times before and it was due to me not adding this important attribute to the request - when authentication is required.
So I am a bit lost and hoping you can help me out. I am writing an app in simple PHP/HTML/Javascript app.
My Goal: To POST json data to an API.
How can I go about this? I just can't find any good examples to show me the best way to handle this.
In my request I need to send Basic Authorization as well as the json values.
This is what I have right now
$.ajax({
type: "POST",
url: "host.com/api/comments",
dataType: 'json',
async: false,
headers: {
"Authorization": "Basic xxxxxxxxxxxxxxxxxxxxxxx"
},
data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}',
success: function (){
alert('Comment Submitted');
}
});
I can't get the above code to work. Im using a button to call a function that will start the ajax call but nothing is happening.
Any help be be amazing! Thank You.
Use
contentType:"application/json"
You need to use JSON.stringify method to convert it to JSON format when you send it,
And the model binding will bind the json data to your class object.
The below code will work fine (tested)
$(function () {
var customer = {contact_name :"Scott",company_name:"HP"};
$.ajax({
type: "POST",
data :JSON.stringify(customer),
url: "api/Customer",
contentType: "application/json"
});
});
If you're writing the API in PHP, and it uses $_POST to get the parameters, you shouldn't send JSON. PHP only knows how to decode multipart/form-data and application/x-www-form-urlencode. If you pass an object to $.ajax, jQuery will use the urlencode format.
Just take the quotes off the object that you're passing to the data: option.
$.ajax({
type: "POST",
url: "host.com/api/comments",
dataType: 'json',
async: false,
headers: {
"Authorization": "Basic xxxxxxxxxxxxxxxxxxxxxxx"
},
data: {"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}},
success: function (){
alert('Comment Submitted');
}
});
You also shouldn't use async: false, it is deprecated. Learn to write proper async code.
Nobody seems to have addressed one issue - the URL
If the page this is requested from is http://yourhost.com/path/file.html the request will be sent as http://yourhost.com/path/host.com/api/comments
As you have host.com in the URL, I assumed the request is to a different domain?
use one of
http://host.com/api/comments
https://host.com/api/comments
//host.com/api/comments
will only work if your page is loaded http and not https
will work only if the remote API supports https
will only always work properly if the remote API supports both http and https
The other issue is regarding the format of the sent data
The default content-type for $.ajax POST is application/x-www-form-urlencoded; charset=UTF-8
So, sending a POST request with various combinations of contentType and data shows the following
Firstly, without setting contentType
data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}'
request is sent as formData '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}'
data: {"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}},
request is sent as formdata, the following values:
value1: 2.0
value2: setPowerState
value3[state]: 0
looks better, because there's actually multiple values, not just a string
Now, let's set contentType
contentType: 'json', data: {"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}},
firefox does not tell me the format of the following string: 'value1=2.0&value2=setPowerState&value3%5Bstate%5D=0' - looks useless
And finally
contentType: 'json', data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}',
sends the following JSON: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}'
So, finally, if the API requires JSON request data, and it's actually on a domain called "host.com"
$.ajax({
type: "POST",
url: "//host.com/api/comments",
dataType: 'json',
contentType: 'json', data: '{"value1":"2.0", "value2":"setPowerState", "value3":{"state":0}}',
});
I am trying to get flipkart api data . like this but i am not able to send heder with xhrfield
HERE IS MY CODE :
$.ajax({
type: 'GET',
url:'https://affiliate-api.flipkart.net/affiliate/search/json?query=iPhone+mobiles&resultCount=3',
crossDomain: true,
// dataType: 'JSONP',
/*xhrFields: {
withCredentials: true
},*/
// contentType: 'application/json; charset=utf-8',
beforeSend : function(xhr) {
xhr.withCredentials = true;
xhr.setRequestHeader('Fk-Affiliate-Id', 'myid');
xhr.setRequestHeader('Fk-Affiliate-Token', 'mytoken');
},
/* headers: {
'Access-Control-Allow-Origin':'*',
'Fk-Affiliate-Id': 'myid',
'Fk-Affiliate-Token': 'mytoken',
'Content-Type': 'application/x-www-form-urlencoded'
},*/
success: function(data){ ......
}
});
As you can see comment i ahve tried both but not able to send header with xhrfield . if i comment xhrfield header wil be send
You can not send a header with a JSONP requests since all it does is set a script tag to the page.
A JSONP requests consists of appending a script tag to the page. It adds a callback parameter to the URL which the script listens for when the script is executed. There is no way to add the header to a external script.
The site would need to support JSON request for CORs to send the header.
I'd like to create a google-docs add-on that sends an ajax call to a webhook.
I've tried the below, but I get the following error
Error
ReferenceError: "$" is not defined. (line 5, file "")
Code
function myFunction() {
var arr = 'data'
$.ajax({
url: 'webhook_url',
type: 'POST',
data: arr,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function () {
alert('Success');
}
});
}
If ajax can't be used here is there any other way to make a request to a server-side resource
This is an OLD question, so I don't know if you still have the issue, but, from the error you're getting Jquery is either not added, or not available.
You could try doing it with vanilla js, see this link for a walkthrough: https://www.sitepoint.com/guide-vanilla-ajax-without-jquery/
While deploying my MVC Project, I have faced an issue of relative path w.r.t server.
I am hosting the project as an application in IIS. Finally the url to my application will look like http://localhost/portal/Account/Login here 'portal' is the application name in IIS. In the ASP.net development server everything was working fine. while deploying it needed the relative path with respect to server. Because of this my jquery ajax requests started failing.
To fix this issue I kept the actions in hidden field and accessing from there and using for ajax request. The following is the code.
<input type="hidden" value="#Url.Action("GetNewOffersSearch", "Updates")" id="NewOffersSearchUrl" />
var NewoffersUrl = document.getElementById("NewOffersSearchUrl").value;
$.ajax({
type: 'GET',
url: NewoffersUrl ,
cache: false,
timeout: 10000,
contentType: "application/json; charset=utf-8",
success: function (_results) {
$("#updatesContent").html(_results);
},
error: function (_results) {
}
});
Initially NewoffersUrl was "/Updates/GetNewOffersSearch" and it was throwing a path error. But now it is "/portal/Updates/GetNewOffersSearch" and its working fine
I just want to know the approach I am following is correct or not. Is there any better fixes for this issue?
The way we do AJAX requests is similiar, however we pass the URL directly to the url parameter of the ajax call rather than using a hidden field.
$.ajax({
type: 'GET',
url: #Url.Action("GetNewOffersSearch", "Updates"),
cache: false,
timeout: 10000,
contentType: "application/json; charset=utf-8",
success: function (_results) {
$("#updatesContent").html(_results);
},
error: function (_results) {
}
});