I am trying to perform an AJAX request from a Chrome Extension to Basecamp to authenticate in so I can pull tasks. I have added https://site.basecamphq.com to the permissions in manifest.json. However, when this function is executed, I get this in my console:
XMLHttpRequest cannot load https://site.basecamphq.com. Origin chrome-extension://0123456789 is not allowed by Access-Control-Allow-Origin
$("#login").click(function()
{
$.ajax({
type: "GET",
dataType: 'html',
url: "https://site.basecamphq.com",
username: "username",
password: "X",
success: function(data){
$("#example").append(data);
}
});
});
I have added https://*/ to my manifest.json permissions as well, but no luck.
You need to use background page for doing AJAX requests from a content script.
Background page code:
chrome.extension.onRequest.addListener(function(request, sender, callback) {
$.ajax({
type: "GET",
dataType: 'html',
url: request.url,
username: "username",
password: "X",
success: callback
});
});
Content script code:
chrome.extension.sendRequest({'url': 'https://site.basecamphq.com'}, function(data) {
$("#example").append(data);
});
Related
I've checked the gizillion answers to this question and for some reason I can't get this to work.
I get the error:
401 (Unauthorized)
My route is an api route guarded.
My data:
let ajaxMainTemplate = {
'mainTemplate': mainTemplate,
'templateId': templateId,
'_token': accessToken,
}
My ajax call:
$.ajax({
type: 'POST',
url:`../api/aiMainTemplate/${ajaxData.templateId}`,
data: {
_token: ajaxData._token,
ajaxData
},
success: function(response) {
console.log(response)
}
})
I've tried the above to test based on another response. I put the token outside of the ajaxData object. I get the same error. I've also attempted:
$.ajax({
type: 'POST',
url:`../api/aiMainTemplate/${ajaxData.templateId}`,
headers: { 'X-CSRF-TOKEN': ajaxData._token },
data: ajaxData,
success: function(response) {
console.log(response)
}
})
Same.
I've also confirmed the token is there by adding a console.log Any ideas what I'm doing wrong with this?
My url was behind the api protected route so I had to do an ajax call to login into it via ajax.
The credentials are in a variable ajaxData.
$.ajax({
type: 'POST',
url: 'http://127.0.0.1:8000/api/login',
data: ajaxData,
success: function(response) {
shopifyToken = response.success.token;
getListProducts(shopifyToken);
}
});
With the shopify token generated from this login it worked.
I need to to call an API with basic auth implemented. I have a form on the frontend where a user selects some options and then the values are transmitted to an API endpoint to fetch some results.
I am planning to call the API something like this ...
$.ajax({
url: WEBSERVICE_URL,
type: "GET",
dataType: "application/json; charset=utf-8",
username: "admin", // How do I HIDE this ?
password: "mypwd", // How do I HIDE this ?
processData: false,
contentType: "application/json",
success: function() {
alert("success");
},
error: function() {
alert("ERROR");
},
});
My problem is how to mask/hide the login and pwd in AJAX calls ? Is it even possible ? If not, then what are the alternate solutions ? Use a PROXY ?
Site works completely OK on other hosting. That is also shared. But doesn't work on current hosting when an Ajax post request is made. The server(not app) responds with 403.
What should I do now? I used postman and it works okay. No problem in url also.
Update:
the code for ajax request:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: data,
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json'
});
The problem was "not setting" content-type in headers.
I changed the code into:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: JSON.stringify(data),
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json',
headers: {
'Content-Type':'application/json'
}
});
And it worked.
I am sending username and password as request parameter to the server in AJAX and trying to show the response message. But not able to showing the response message.In fiddler it is showing the response message. But while on the browser screen it is not showing.PLEASE somebody help me out where i am wrong or need to change anything..
I have written like this-
$(document).ready(function () {
$("#btnCity").click(function () {
$.ajax({
type: "POST",
url: "http://test.xyz.com/login",
crossDomain: true,
contentType: "application/json; charset=utf-8",
data: { username: "abc", password: "1234" },
dataType: "JSONP",
jsonpCallback: 'jsonCallback',
async: false,
success: function (resdata) {
alert(resdata);
},
error: function (result, status, err) {
alert(result.responseText);
alert(status.responseText);
alert(err.Message);
}
});
});
});
TL;DR: I guess the problem is on the server side of your code (that we don't know yet).
At first: I don't know why it fails for you. I've taken your code and ran it against a public available JSONP API, that returns the current IP of your system and it worked.
Please try yourself using the URL: http://ip.jsontest.com/.
So most probably, the server doesn't return the right response to the JSONP request. Have a look at the network tab in developer tools. With your current code, the answer of the server should be something like:
jsonCallback({'someResponseKeys': 'someResponseValue'});
Note: The header should contain Content-Type:application/javascript!
BTW, even if this doesn't for now solve your problem - here are some tweaks, I'd like to advice to you:
Don't set async to false, at the documentation of jQuery.ajax() says:
Cross-domain requests and dataType: "jsonp" requests do not support synchronous
operation.
You don't need to set a jsonpCallback, because jQuery will generate and handle (using the success function a random one for you. Quote from the docs:
This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling.
So here comes my code:
$(document).ready(function () {
$("#btnCity").click(function () {
$.ajax({
type: "POST",
url: "http://ip.jsontest.com/",
crossDomain: true,
data: { username: "abc", password: "1234" },
dataType: "JSONP",
success: function (resdata) {
console.log("success", resdata);
},
error: function (result, status, err) {
console.log("error", result.responseText);
console.log("error", status.responseText);
console.log("error", err.Message);
}
});
});
});
A working example can be found here.
Another solution, like Yonatan Ayalon suggested, can be done with a predefined function and then setting the jsonpCallback explicitly to the function that should be called.
if you see the response in Fiddler, it seems that the issue is in the callback function.
you are doing a jsonP call - which means that you need a callback function to "read" the response data.
Do you have a local function that calls "jsonCallback"?
this is a simple jsonP request, which initiates the function "gotBack()" with the response data:
function gotBack(data) {
console.log(data);
}
$.ajax({
url: 'http://test.xyz.com/login' + '?callback=?',
type: "POST",
data: formData,
dataType: "jsonp",
jsonpCallback: "gotBack"
});
You can try with the following methods and close every instance of chrome browser in task manager, then open browser in web security disable mode by the command "chrome.exe --disable-web-security"
success: function (resdata) {
alert(resdata);
alert(JSON.stringify(resdata));
},
And the better option to debug the code using "debugger;"
success: function (resdata) {
debugger;
alert(resdata);
alert(JSON.stringify(resdata));
},
I have following code:
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://www.example.com/rest/api.php?request=users",
dataType: "json",
}).then(function(data) {
$('.greeting-id').append(data);
//$('.greeting-content').append(data.content);
});
});
But cannot see any data.
When I copy-paste url of web-service in browser, it works fine. any idea?