I am facing trouble with ajax request in asp.net core blazor application. I have tried almost everything i can find on stackoverflow related to ajax post call results in 400 bad request
I have following controller
[Route("api/{controller}/{action}/{id?}")]
public class BoldReportsAPIController : ControllerBase, IReportController
{
// Report viewer requires a memory cache to store the information of consecutive client request and
// have the rendered report viewer information in server.
private IMemoryCache _cache;
// IHostingEnvironment used with sample to get the application data from wwwroot.
private IWebHostEnvironment _hostingEnvironment;
public BoldReportsAPIController(IMemoryCache memoryCache, IWebHostEnvironment hostingEnvironment)
{
_cache = memoryCache;
_hostingEnvironment = hostingEnvironment;
}
// Post action to process the report from server based json parameters and send the result back to the client.
[HttpPost]
public object PostReportAction([FromBody] Dictionary<string, object> jsonArray)
{
return ReportHelper.ProcessReport(jsonArray, this, this._cache);
}
}
When i make request with postman it works fine as shown below.
But when i make ajax call it gives 400 bad request error.
I have literally replaced original ajax call with the code generated from postman but that code doesn't work also.
var settings = {
"async": true,
"crossDomain": true,
"url": "https://localhost:44313/api/BoldReportsAPI/PostReportAction",
"method": "POST",
"headers": {
"content-type": "application/json",
"cache-control": "no-cache",
"postman-token": "fbed680d-0143-ab86-24e6-176c16d713bf"
},
"processData": false,
"data": "{\"reportAction\":\"ReportLoad\",\"isReloadReport\":false,\"controlId\":\"report-viewer\",\"reportPath\":\"sales-order-detail\",\"enableVirtualEvaluation\":false,\"reportServerUrl\":\"\",\"processingMode\":\"remote\",\"locale\":\"en-US\",\"accessInternalValue\":false,\"customBrandSettings\":{\"hideHelpLink\":false,\"customDomain\":\"https://help.boldreports.com\",\"customBrandName\":\"Bold Reports\",\"customLinks\":[{\"name\":\"ESLicenseMessage\",\"url\":\"/licensing/license-token/\"}]}}\r\n"
}
$.ajax(settings).done(function (response) {
console.log(response);
});
It was due to ant forgery token. Apparently, ABP automatically adds antiforgery token so after adding
[IgnoreAntiforgeryToken(Order = 2000)]
to my action method, issue was resolved.
But it feels like I am breaking security.
While using ValidateAntiForgeryToken, you have to add the headers for the Report Viewer API interaction. You can refer to the below article to add the headers for your Report Viewer interaction. These need to be added with the ReportViewer introp.
https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/handle-post-actions/#add-custom-header-in-ajax-request
Related
I'm using fetch to return a JSON payload to a React SPA. My web server backend is ASP.NET Core 2.0. I recently updated to ASP.NET Core 2.0 and for the life of me can't figure out why IE no longer works with the web application.
The fetch is pretty straight forward.
fetch(getApiPath() + url, {
credentials: 'include'
})
.then(function(response){
if (response.status === 401 && history) {
history.push("/login")
throw new Error('Redirecting to login');
} else if (response.status === 200) {
return response.json();
} else {
throw new Error(response.statusText);
}
})
.then(success)
.catch(function(e) {
console.log(e)
});
The server end is also pretty straight forward.
[Authorize]
[Route("/dashboard")]
public object Index()
{
Log.Debug("Index");
return new { dashboard = _dashboard, authenticated = HttpContext.User.Identity.IsAuthenticated };
}
The problem manifests itself in a "Invalid Character" error in IE. This works fine in Chrome and Firefox. When looking at the response body, the IE response, is in fact an invalid character while in Chrome, it is the JSON payload.
I'm a little unsure where to even start looking into why IE wouldn't receive or parse the HTTP response correctly. Any ideas?
EDIT:
Making a cross-origin request from a Webpack Dev Server running on port 10000 to a local ASP.NET Core app running on 10001. When packaged for deployment, both the React App and the ASP.NET Core App run on 10000.
Headers between the two requests.
IE Request
IE Response
Chrome
Updated the endpoint to return an IActionResult and explicitly returning JSON. Same result. I've also realized it doesn't work in Edge either.
[Authorize]
[Route("/dashboard")]
public IActionResult Index()
{
return Json(
new { dashboard = _dashboard, authenticated = HttpContext.User.Identity.IsAuthenticated }
);
}
Without additional info I suspect the issue is related to ASP.Net's content negotiation and the fact your method return type is object. Don't use object, this is not Java :))
Before anything else, make sure fetch is sending an Accept: application/json header in IE.
I would also recommend for you to change the return type to IActionResult (or JSONResult if you want to force JSON) for your controller methods.
What are some successful methods for performing Cross Origin Put requests? I successfully used a Proxy to make a GET request and put it into a Dropdown list as can be seen here >> Create Dropdown list from API Query >>but have not been able to use the same process in making a PUT Request?
Thoughts?
I was able to successfully get a PUT request to work just peachy through the use of the proxy in javascript.
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
Once the Proxy was established, I used the chrome extension (now a desktop app) Postman to get the PUT HTML code. This was done by first getting the PUT request to work in Postman and then selecting the "code" link (below the "send" button) and selecting "JavaScript Jquery AJAX" from the drop-down. Here is an example of outputted code from Postman.
var settings = {
"async": true,
"crossDomain": true,
"url": "https://[apiurl].com",
"method": "PUT",
"headers": {
"content-type": "text/xml",
"cache-control": "no-cache",
"postman-token": "[token]"
},
"data": "<this_is_the_xml_data_youre_sending>"
}
$.ajax(settings).done(function (response) {
console.log(response);
});
Once the code is copied from Postman, put the proxy code and Postman javascript into an HTML page and watch the PUT request happen.
I'm having 2 projects:
1) Restful Project with jdbc spring security (username:password) => port:9091
2) HTML5 Application with a JQGrid => port:9092
I have disabled csrf token in both the projects. Now, I'm able to hit the rest service successfully from browser and using postman and by passing the credentials
But when I try to hit the service from HTML5 Application (Jqgrid), I'm see that XHR Call is ending with status 302 and I'm not getting the results back.
So, please guide me on the same.
Additional Points:
I'm able to successfully hit the rest service from postman by passing basic authentication. But from JQGrid, I'm not able to query data even after using below code in my JQGrid. It always goes to status 302. (An FYI, I'm using stateless authentication in my spring security) :
loadBeforeSend: function(jqXHR) {
jqXHR.setRequestHeader("Authorization", CURRENT_AUTH_KEY);
},
beforeSend: function (request)
{
request.withCredentials = true;
request.setRequestHeader("Authorization", CURRENT_AUTH_KEY);
},
ajaxEditOptions: {
beforeSend: function(jqXHR) {
jqXHR.setRequestHeader("Authorization", CURRENT_AUTH_KEY);
}
},
ajaxGridOptions: { Authorization: CURRENT_AUTH_KEY } ,
I'm doing some test over WCF REST WebServices and i'm stuck with the POST call.
I've created a webservice that exposes some test data about the good ol' Northwind DB and since i wish to consume it locally from a test HTML page and since i'd like to test CORS capabilities, i made it CORS compliant by following these instruction http://enable-cors.org/server_wcf.html.
Unfortunately problems comes out when i make POST calls.
Unlike GET calls (works very well), POST call throws this error:
What the hell is it? it seems that "Access-Control-Allow-Origin" header is not correctly managed client-side, beacuse in my EnableCrossOriginResourceSharingBehavior WCF class, the method "ApplyDispatchBehavior" (it filter "Access-Control-Allow-Origin" headers of the arrival requests) is hit when i make a POST call, but then Ajax call fails.
This is my jQuery Ajax post command:
//Create new object
var item = {
"CustomerId": "0",
"CompanyName": "prova"
};
//Push object
$.ajax({
type: "POST",
url: 'http://localhost:3434/NorthwindService.svc/Customer/Create',
crossDomain: true,
headers: {'Access-Control-Allow-Origin' : '*'},
data: JSON.stringify(item),
success: function (data) {
alert('ok!');
},
contentType: 'application/json; charset=utf-8',
dataType: 'json'
});
This is my WCF service Visual Studio 2013 project.
To test it, you only have to set "NorthwindConnectionString" in web.config to an existing one. The webservice method that i've problem with, is the POST to the "http://localhost:3434/NorthwindService.svc/Customer/Create" method, all the others works fine.
This is a preview of my method contract:
[OperationContract]
[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, UriTemplate = "Customer/Create", BodyStyle=WebMessageBodyStyle.WrappedRequest)]
void NewCustomer(CustomerDTO customer);
Thanks in advance.
I don't know what's going on, but thanks to supertopi and his link, i did the right steps to make it works. Unfortunately implementing all things discussed in here How to handle Ajax JQUERY POST request with WCF self-host did't works. I continued to get "405 Method not allowed" even by creating a new project.
The only thing that works in my case is the following:
1) Implement CustomHeaderMessageInspector and EnableCrossOriginResourceSharingBehavior classes and edit web.config as exposed in http://enable-cors.org/server_wcf.html.
2) Create in the service contract the following method:
[OperationContract]
[WebInvoke(Method = "OPTIONS", UriTemplate = "*")]
void GetOptions();
3) Implementing it empty.
public void GetOptions()
{
}
It sounds crazy, but it actually works.
If i remove GetOptions() operation contract, i continue to get 405 error on my client. If i implement it like indicated by supertopi's link (obviously after remove all stuff created in the step 1), it doesn't work either.
Hope it helps.
Your HTTP Request Method is defined OPTIONS instead of POST.
That is why you get HTTP Response 405 Method not Allowed (no handler for OPTIONS request)
Change the type parameter in jQuery ajax constructor to "POST" and the request is routed to correct handler.
ok.
I'm using Web API to make AJAX requests.
I'm trying to send a PUT request to an action on a controller.
I'm using route attributes.
When I'm sending the data as part of the route data, everything is fine and the action gets the right info.
However, when I'm trying to send the data in the body, I get a 405 status ((Method is not allowed).
I'm also adding the [FromBody] attribute to the parameter. Here's by jQuery call:
type: 'PUT',
url: 'api/ServerQueue/activity',
data: "=2",
success: function (xhr) {
$("#load").hide();
},
error: function () {
$("#load").hide();
}
};
Here's my action:
[Route("status/{status}")]
public string PutStatus([FromBody]int status)
{
}
I placed a "RoutePrefix" on the controller body.
BTW, I'm using VS 2012.
Any idea what could be the source of the problem?
Try changing the route configuration from
[Route("status/{status}")]
to
[Route("status")]