We Keep Coding

Can not send POST with body

I have issue in my application. I have various REST enpoints which are working fine. But now I want to send POST request with body. I already have 2 endpoints for POST method, but data are send using PathParam.
I created new endpoint, but when I send request I am getting CORS error. When I use the same endpoint without body in request everything is okay but of course at backend side I do not get any data from frontend (I have breakpoint inside method).
this is how I send request from my angular application:
post(requestUrl: string, body?: any): Observable<any> {
return this.httpClient.post<any>(this.API_URL + requestUrl, {password: 'test'});
}
After sending request I got:
Access to XMLHttpRequest at 'http://localhost:8080/...' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If I send request like this (without body) this endpoint works fine:
post(requestUrl: string, body?: any): Observable<any> {
return this.httpClient.post<any>(this.API_URL + requestUrl);
}
At backend side I have added settings for CORS:
return Response.ok(object).header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.allow("OPTIONS").build();
When I am sending request from Insomnia everything is ok - I can send body and I am getting sent data on backend.
Should I somehow set request headers at frontend side?
Here is my AdminApiController class:
#Path("/admin")
#RequestScoped
public class AdminApiController extends BaseApiController {
#Inject
private AdminAssembler adminAssembler;
#POST
#Path("/login")
#Produces(MediaType.APPLICATION_JSON)
#Consumes(MediaType.APPLICATION_JSON)
public Response login(LoginRequest request) {
return Response.ok(adminAssembler.login(request))
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.header("Access-Control-Allow-Headers", "Content-Type")
.allow("OPTIONS").build();
}
}

When your angular application sends a JSON payload in a POST request, it probably adds the header Content-Type: application/json. This header classifies the POST request as a "non-simple" request (that is, a request that cannot result out of an HTML <form> element without additional Javascript). Such "non-simple" requests cause to browser to make a preceding preflight request, that is an OPTIONS request with headers
Origin: http://localhost:4200
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
to which the server must respond with an Access-Control-Allow-Origin header and Access-Control-Allow-Headers: Content-Type. If it does not, the browser will not make the POST request and show an error like you observed.
Your Java code covers only #POST, not #OPTIONS, that's why the server does not respond to the preflight request with the necessary headers. How best to handle the OPTIONS requests for all endpoints on your server is a question for Java experts (which I am not).

You need to define your httpOptions.
Try this.
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
post(requestUrl: string, body?: any): Observable<any> {
this.httpClient.post<any>(this.API_URL + requestUrl, {password: 'test'}, this.httpOptions)
}
Let me know if it worked for you.

Not able to receive header parameter in ContainerRequestFilter

I'm creating web-services in Java with Jersey2.0. Everything works as expected when I execute request from POSTMAN but when I execute request from the client application I'm not able to receive header parameter. My client application is on JavaScript. Also, I've added the CORS allows origin request parameters in ContainerResponseContext.
The following shows my ContainerResponseFilter class where I add the CORS.
#Provider
class CORSFilter : ContainerResponseFilter {
override fun filter(requestContext: ContainerRequestContext?, responseContext: ContainerResponseContext?) {
responseContext?.apply {
headers.add("Access-Control-Allow-Origin", "*")
headers.add("Access-Control-Allow-Headers", "origin, content-type, authorization, accept, privatekey")
headers.add("Access-Control-Allow-Credentials", "true")
headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD")
}
}
}
The privatekey is my header name for the request. Now here's my code for ContainerRequestFilter.
#Priority(AUTHENTICATION)
#Provider
class JsTokenFilterNeeded : JsBaseFilter(this::class.java.simpleName) {
override fun filter(request: ContainerRequestContext?) {
val path = request?.uriInfo?.path
val privateKeyHeaderValue = request?.getHeaderString("privatekey")
println("private key -> $privateKeyHeaderValue")
}
}
I'm always getting the null value in privateKeyHeaderValue. Both the containers are successfully registered in ResourceConfig class.
As of now, I'm getting no 'Access-Control-Allow-Origin' header is present on the requested resource here's the log.
{host=[203.***.51.***:5555], connection=[keep-alive], access-control-request-method=[GET], origin=[http://localhost:38596], user-agent=[Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36], access-control-request-headers=[privatekey], accept=[*/*], alexatoolbar-alx_ns_ph=[AlexaToolbar/alx-4.0.3], referer=[http://localhost:38596/], accept-encoding=[gzip, deflate], accept-language=[en-US,en;q=0.9]}
Edit 1
Here's my Js code for the client application.
$.ajax(
{
type: "GET",
headers: {
'privatekey': privateKey
},
url: "http://***.124.**.76:5555/dcu/energy/"+active_import,
data: {
'dcu_id': '99220445',
'tariff': 0
},
error: function (result) {
console.log(result);
},
success: function (result) {
console.log(result);
}
});
Edit2
I'm using ResourceConfig in order to register my Providers. Here's my ResourceConfig class.
class MyResourceConfig : ResourceConfig() {
init {
register(CORSFilter())
register(JsTokenFilterNeeded())
}
}

There is a preflight request that happened before the real request. The preflight request doesn't send any of the headers (the key header included). It only sends headers asking the server if the request is allowed. So when the preflight request reaches the filter, the token will not be there.
What you should do is make the CorsFilter implement both a ContainerRequestFilter and a ContainerResponseFilter. Make it a #PreMatching filter. That way it will be called before the token filter. In the request filter, check to see if it is a preflight request. If it is, then abort the request. This will cause the request to skip the rest of the request filters and go straight to the response filters. In the response filter side, you can add the CORS headers.
You should read the UPDATE in this post to get a better understanding of the flow of the CORS protocol and also see a better implementation of the CorsFilter that you can use that should work for your scenario.

No 'Access-Control-Allow-Origin' is present on requested resource

I am having a weird issue where my client side request is telling me I have no 'Access-Control-Allow-Origin' present when making an HTTP POST request to a java servlet I have hosted and live. I have made sure to add the necessary headers in my response to clear up CORS requests issues but it does not seem to be recognizing the headers.
Here is my angular $http.post request I am making from the client side:
var parameter = JSON.stringify(details);
var req = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
data: parameter
}
$http.post(localurl, req).
then(function(response) {
});
Here is the error I am getting from chrome:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8081' is therefore not allowed access.
Here is the beginning of my java servlet doPost function:
#Override
public void doPost(HttpServletRequest req, HttpServletResponse res) {
res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, HEAD");
res.addHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept");
I have been searching various stackoverflow questions and those response headers I am setting in my servlet should clear up the CORS requests issues but it does not seem to be recognizing the response headers I am setting at the beginning of the doPost function. Any and all help is very appreciated. Thanks in advance.

The problem is on your back-end, if yours is nodejs, should be like this way to allow Access-Control-Allow-Origin:
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});

Not able to call servlet using ajax

I am trying to call servlet using ajax on click event. And from that servlet I am calling google auth end point. I tried set header to the servlet I am calling but I an not able to get rid of this error
XMLHttpRequest cannot load
https://accounts.google.com/o/oauth2/auth?client_id=2536-a…nid%20profile%20email&state=F1BFD3804&display=popup.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed
access.
Here is the code
$.ajax({
type: "GET",
url: "/url-for-servlet",
dataType: "jsonp",
contentType: 'application/json',
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR)
},
success: function (data) {
alert("yippy");
console.log(data);
}
});
On servlet I added to response
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.addHeader("Access-Control-Max-Age", "3600");
response.addHeader("Access-Control-Allow-Headers", "x-requested-with");
Any idea what I am missing here? Thanks for the help.

This is a standard security restriction : JS cannot make requests to domains other than their own. So you have an application on localhost making Ajax calls to an application on accounts.google.com - not allowed by default.
See this question

AJAX usually doesn't allow to call other domain API from it. It is called CSRF attack. The solution for you is, Post the data to your server servlet and do the action required there in the backend(Servlet).

Can't get the Rest Post response in Jquery Ajax post call

I am calling the Rest call using the Ajax post method but i get the below error or response.
{"readyState":0,"status":0,"statusText":"error"}
Even i enable the cors($.support.cors = true; ) and crossDomain (crossDomain: true (add in headers)).
Here is the sample request:-
function() {
$.support.cors = true;
var evergentData = {
"UpdateContactRequestMessage":{
"channelPartnerID":"123456",
"email":"greg#gmail.com",
"firstName":"greg",
"lastName":"chappel",
"externalId":"GC123",
"sessionToken":"f53095854bb230996f54fe32ed5a63f68c7718c7"
}
};
//GetProducts();
jQuery.ajax({
type: 'POST',
url: 'url for rest api call',
contentType: "application/json",
Accept: "application/json; charset=utf-8",
dataType: 'json',
data: evergentData,
//data: JSON.stringify(evergentData),
crossDomain: true,
processData: true,
headers: { 'access-control-allow-origin': '*',
},
success: function(resp){
// we have the response
alert("Server said123:\n '" + resp + "'");
},
error: function(e){
alert('Error121212: ' + e);
alert(e.toString());
console.log('my message' + e);
console.log('tables: ' + JSON.stringify(e));
}
});
};
But i tested this Restapi call in the 'postman' google chrome extension i got the response(successfully got the response).
Here is the response headers:-
access-control-allow-headers → client_type, content-type, accept, accept-language, auth_token_base64, appID, accept-encoding, content-length, x-requested-with
access-control-allow-methods → POST, GET, OPTIONS, DELETE
access-control-allow-origin → *
allow → GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS
content-length → 92
content-type → application/json
x-frame-options → sameorigin
x-webobjects-loadaverage → 0
Anyone help me why i didn't get response from rest api call in JqueryAjax post calls.
Thank's advance.

It is important to understand that access-control-allow-origin': '*' in REQUEST header does nothing.
The Access-Control-Allow-Origin header must be in the RESPONSE header of the service you are calling. So the service regulates who is allowed to call the resource, thus service must add your app URL to it's RESPONSE Access-Control-Allow-Origin header.
Also note that wildcard * does not work for resources accessed over HTTPS. For resources over HTTPS ONLY absolute paths are valid.
Why Postman works? Cause it ignores the headers and policies while browser does not.
More reading:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS