angular js http request from aspx method - model-view-controller

I have a page locations.aspx that has a method behind it in locations.aspx/getData. when I use the code
$http.jsonp($scope.url)
.success(function (data, status, headers, config) {
alert(data);
}).error(function (data, status, headers, config) {
$scope.status = status;
});
with the $scope.url being locations.aspx/getData it loads the html page of the aspx page but doesn't access the method. I can access the method using
$.ajax({
type: "POST",
url: $scope.url,
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (p) {
var temp = $.parseJSON(p.d);
$scope.allItems.push(temp);
},
error: function () {
alert('error');
}
});
but the data never updates or binds on the view side. An example on the html is
<select ng-model="selectLocation" id="selectLocation" ng-change="onLocationChange()">
<option></option>
<option ng-repeat="l in allItems">{{l.location}}</option>
</select>
After the ajax call allItems array does have an item in it but the view never updates.
My ajax call headers are
Request URL:localhost:41796/locations.aspx/getData
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/javascript, /; q=0.01
Content-Type:application/json; charset=utf-8
Response Headersview source
Cache-Control:private, max-age=0
Connection:Close
Content-Length:270
Content-Type:application/json; charset=utf-8
and my $http headers are
Request URL:localhost:41796/locations.aspx/getData
Request Method:GET
Status Code:200 OK
Request Headersview parsed
GET /locations.aspx/getData HTTP/1.1
Host: localhost:41796
Connection: keep-alive
Response Headersview parsed
HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 7177
Connection: Close

Based on the discussion above, it seems you're using ASP.NET and running into specific issues with it.
ASP.NET can be pretty picky sometimes about what it will parse and what it won't -- especially when it comes to MVC (which it doesn't appear that you're using here, but perhaps [WebMethod] (what I assume you're using) has the same kinds of issues).
Instead of messing with jQuery's $.ajax, you can use Angular's $http in the same way:
$http({
method: 'POST',
url: $scope.url,
contentType: 'application/json; charset=utf-8'
})
.success(function (data, status, headers, config) {
alert(data);
})
.error(function (data, status, headers, config) {
$scope.status = status;
});
Check this: http://docs.angularjs.org/api/ng.$http#Parameters for more information.

Related

502 bad gateway error for cross-origin request

I am using the serverless framework to deploy my lambda to AWS and have been able to successfully run POST requests via Postman to the API Gateway associated with my lambda function, but when I try run a POST request from a form submission (AJAX request) on a local server I am receiving the 502 error message,
Access to XMLHttpRequest at 'https://*id*.execute-api.us-east-1.amazonaws.com/prod/message' from origin 'http://localhost:2368' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
which I didn't expect since I have the cors property in my serverless.yml set to true, which sets CORS configurations for the HTTP endpoint. Here is the function yaml setup:
functions:
email:
handler: handler.sendEmail
events:
- http:
path: message
method: post
cors: true
Here is the jQuery AJAX request:
$.ajax({
type: 'POST',
url: 'https://*id*.execute-api.us-east-1.amazonaws.com/prod/message',
crossDomain: true,
data: JSON.stringify(formData),
contentType: 'application/json',
dataType: 'json',
success: function(data) {
console.log(data)
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(ajaxOptions);
console.log(thrownError);
}
});
Is there something that I need to adjust with the API Gateway configuration or within my Lambda application?
Here is my response function:
const generateResponse = (body, statusCode) => {
console.log("generateResponse")
console.log(body)
return Promise.resolve({
headers: {
"access-control-allow-methods": "POST",
"access-control-allow-origin": "*",
"content-type": "application/json",
},
statusCode: statusCode,
body: `{\"result\": ${body.message}}`
});
};
Also provided is the ajax request:
$.ajax({
type: 'POST',
url: 'https://*my-lambda-id*.execute-api.us-east-1.amazonaws.com/prod/message',
crossDomain: true,
data: JSON.stringify(formData),
contentType: 'application/json',
dataType: 'json',
success: function(data) {
console.log(data)
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(ajaxOptions);
console.log(thrownError);
}
})
And the resulting OPTION and POST Request and Response Headers triggered by the AJAX:
OPTIONS:
Request URL: https://*my-lambda-id*.execute-api.us-east-1.amazonaws.com/prod/message
Request Method: OPTIONS
Status Code: 200
Response Headers
access-control-allow-credentials: false
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent
access-control-allow-methods: OPTIONS,POST
access-control-allow-origin: http://localhost:2368
content-length: 1
content-type: application/json
date: Tue, 08 Oct 2019 11:11:36 GMT
status: 200
via: 1.1 *id*.cloudfront.net (CloudFront)
x-amz-apigw-id: *id*
x-amz-cf-id: *id*
x-amz-cf-pop: *id*
x-amzn-requestid: *id*
x-cache: Miss from cloudfront
Request Headers
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://localhost:2368
Referer: http://localhost:2368/
Sec-Fetch-Mode: no-cors
POST
Request URL: https://*my-lambda-id*.execute-api.us-east-1.amazonaws.com/prod/message
Request Method: POST
Status Code: 502
Request Headers
Accept: application/json, text/javascript, */*; q=0.01
Content-Type: application/json
Origin: http://localhost:2368
Referer: http://localhost:2368/
Sec-Fetch-Mode: cors
Wherever you return a response from your Lambda function you need to include the specific header CORS requests. The cors: true option you add to serverless.yml only helps make sure that the OPTIONS pre-flight requests work. Don't forget that this includes non-success responses as well.
For example:
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Headers': 'Authorization'
}
}

Extrange "methodNotAllowed" error

Laravel Version: 5.3.31
Description:
I have the exact same ajax call on two diferente pages of my project but im getting an "methodNotAllowed" error in one of them.
My web.php:
Route::post('/seccion', 'FiltrosController#getSecciones')->name("filtro.secciones");
My AJAX call:
$.ajax({
type: "post",
url: "{{ route("filtro.secciones") }}",
data: $("#form").serialize(),
dataType: "json",
success: function (datos) {
//mycode
},
error: function (request, status, error) {
console.log(error);
}
});
Here is the header of the call that works:
Request URL:http://192.168.99.100:3001/seccion
Request Method:POST
Status Code:200 OK
Remote Address:192.168.99.100:3001
Referrer Policy:no-referrer-when-downgrade
And the response header that i get:
Cache-Control:no-cache
Connection:Keep-Alive
Content-Length:457
Content-Type:application/json
Date:Mon, 07 Aug 2017 19:26:43 GMT
Keep-Alive:timeout=5, max=97
Server:Apache/2.4.10 (Debian)
Ok in this case all works. But then in the other page, i make the same ajax call and im getting this:
Request URL:http://192.168.99.100:3001/seccion
Request Method:POST
Status Code:405 Method Not Allowed
Remote Address:192.168.99.100:3001
Referrer Policy:no-referrer-when-downgrade
And the response header of the call that fails:
allow:POST
Cache-Control:no-cache, private
Connection:close
Content-Type:text/html; charset=UTF-8
Date:Mon, 07 Aug 2017 19:26:57 GMT
Server:Apache/2.4.10 (Debian)
X-Powered-By:PHP/7.1.7
We can see POST is allowed in the response header but im getting this "Code:405 Method Not Allowed"
I dont know what is happing, any clue?
Thanks.
The problem was that i put "{{ method_field('PATCH') }}" in the form that wraps the select dropdown that fires the ajax call, so a _method parameter with "PATCH" value is passed in the data of the ajax call and throws the "methodNotAllowed" error.
I fixed it just passing the data i need and not all the form serialized:
$.ajax({
type: "post",
url: "{{ route("filtro.secciones") }}",
data: $("#form").find('#zonas').serialize(),//<-- solution
dataType: "json",
success: function (datos) {
//my code
},
error: function (request, status, error) {
console.log(error);
}
});

AJAX success handler not being invoked

I am trying to perform an AJAX request to a Play application on Heroku from my local machine. Currently, the 'complete' and 'error' handlers are being invoke but not the 'success'. In Opera and Firefox, my response headers are:
HTTP/1.1 200 OK
Cache-Control: no-cache
Content-Type: application/json; charset=utf-8
Server: Play! Framework;1.2.4;prod
Set-Cookie: PLAY_FLASH=;Expires=Fri, 5-Oct-12 08:22:46 GMT;Path=/
Set-Cookie: PLAY_ERRORS=;Expires=Fri, 5-Oct-12 08:22:46 GMT;Path=/
Set-Cookie: PLAY_SESSION=;Expires=Fri, 5-Oct-12 08:22:46 GMT;Path=/
Content-Length: 2295
Connection: keep-alive
Opera also shows the returned JSON object
Here is my code:
var url = "http://myurl.com"
$.ajax({
'complete': function (jqXHR, status) {
console.log('Complete!');
console.log(status);
console.log(jqXHR.getAllResponseHeaders());
},
'dataType': "application/json",
'error': function (jqXHR, status, error) {
console.log('Error!');
console.log(status);
console.log(error);
},
'success': function (data, status, jqXHR) {
console.log('Success!');
console.log(status);
console.log(data);
},
'type': 'GET',
'url': url
});
Other similar questions suggested changing the datatype to text or removing it altogether: neither work. I have successfully validated the returned JSON object at JSONLint.
The console log is:
Error!
error
Complete!
error
I'm not sure if it is linked, but the getAllResponseHeaders() function is returning an empty string.
Is this a cross domain error?
Any help is welcome!
Thanks
Here they suggest that it is indeed a cross domain error.

Problems with sending ajax post to controller

I have an action
[HttpPost]
public JsonResult AddLocationsForOrder(List<BuyerOrderLocation> locations, string[] orders)
{
// something here
}
and js code, which sends the request:
data = { locations: serializedLocations, orders: selector.val() };
$.ajax({
url: addLocationUrl,
success: function (responseText) { Core.responceReceived(responseText, null, null); },
error: function () { Core.showErrorNotification("Sorry, some error occured. Please contact administrator"); },
async: false,
type: 'POST',
dataType: 'json',
data: JSON.stringify(data)
});
post details from firebug are here:
locations
"[{"id":225,"country":"United States","countryShort":"US","state":"Iowa","stateShort":"IA","city":null,"zipCode":null,"address":"Douglas, IA, USA","latitude":41.9053851,"longtitude":-93.8349976,"bounds":null,"isDeleted":false,"county":"Boone","radius":0},{"id":226,"country":"United States","countryShort":"US","state":"Iowa","stateShort":"IA","city":null,"zipCode":null,"address":"Iowa, USA","latitude":41.8780025,"longtitude":-93.097702,"bounds":null,"isDeleted":false,"county":null,"radius":0}]"
orders
[ "10440" , "10441" , "10442" ]
0 "10440"
1 "10441"
2 "10442"
And request headers:
Accept application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Connection keep-alive
Content-Length 830
Content-Type application/x-www-form-urlencoded; charset=UTF-8
Cookie ASP.NET_SessionId=ewtvgwleg5or1lqctinpjv2d; .ASPXAUTH=8414A94FE30B8F8D6FE862259398F39D6F6D2EE995C9EE16549987E2E1291851788CAB75425579F61F70EBE4C7B785B07CB36773894A5B2A513966247AA5B670A25D4AE565796B449912D745EBE5E5E4AB8280902C132FC3D97C0C33BA2C2357372CD9C9EA49983DC4A8E875C6E4D653FA049EC7B0F3824666F35D3838226AA19ACEEC1B8C5716E995966787268313FEF90E2ABBAE989CA682D406EBCE361BB7
Host local.attorneyboost
Referer http://local.attorneyboost/Order/OrderInfo/10439
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:14.0) Gecko/20100101 Firefox/14.0.1
X-Requested-With XMLHttpRequest
As you can see, request type is "POST", and I'm "Jsoning" data before sending to the server. But in action I got a null values for parameters. What am I doing wrong? I'm already stuck on searching for mistake
In this article they explain how to send complex JSON object to ASP.NET.
Hope this helps
You need to specify the datatype in the request send it to the server. The datatype attribute of your called sets the format of the response of the server, to set the datatype in the format that need to send to the server you need to use the contentType attribute
Modify the ajax called with this
$.ajax({
url: addLocationUrl,
success: function (responseText) { Core.responceReceived(responseText, null, null); },
error: function () { Core.showErrorNotification("Sorry, some error occured. Please contact administrator"); },
async: false,
type: 'POST',
dataType: 'json',
data: JSON.stringify(data),
contentType = 'application/json; charset=utf-8'
});
You need to specify the datatype in the request send it to the server. The datatype attribute of your called sets the format of the response of the server, to set the datatype in the format that need to send to the server you need to use the contentType attribute

jQuery Ajax caching

I make a few Ajax calls to get files via jQuery like so:
$.ajax({
url: "/resx.mvc",
data: {
virtualPath: options.virtualPath,
keys: options.keys,
global: options.global
},
cache: true,
success: function (values) {
$.extend(assignTo, values);
},
dataType: "JSON",
traditional: true
});
When I look at the request in Fiddler, I see that these two headers are being sent, and making my ASP.NET send back an expires header on its response with -1:
Pragma: no-cache
Cache-Control: no-cache
How do I tell jQuery not to issue no-cache?
beforeSend takes an ajax object (XmlHttpRequest object) which you can use to manipulate the request header. Below is an example of setting a header in your request using the ajax object returned in the callback:
$.ajax({
type:"POST",
beforeSend: function (request)
{
request.setRequestHeader("Authority", authorizationToken);
},
url: "entities",
data: "json=" + escape(JSON.stringify(createRequestObject)),
processData: false,
success: function(msg) {
$("#results").append("The result =" + StringifyPretty(msg));
}
});

Resources