REST API response with 400 Bad request when Content-length header is givin in POST - api

I have a Website and a python flask RESTFUL API. When testing the API with Postman it works just fine, but the same request using XMLHttprequest in js gives me a 400 BAD Request code. I looked at the headers send and replicated the XMLHttprequest headers in Postman, to get a 400 BAD REQUEST Code. If i remove the Content-Length header from the request, it works fine. My Postman code (HTML, without content-length):
POST /user/181453766040485888 HTTP/1.1
Host: 127.0.0.1:5000
Content-Type: multipart/form-data; boundary=---
-WebKitFormBoundary7MA4YWxkTrZu0gW
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keeep-alive
Host: 127.0.0.1:5000
Origin: http://localhost:52014
Referer: http://localhost:52014/settings.php
User-Agent: Mozilla/5.0 (Windows NT 10.0;
Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106 (Edition Campaign 76)
cache-control: no-cache
Postman-Token: 5dd34b0b-965c-4d31-83b9-2364b03c0aa2
Content-Disposition: form-data; name="status"
0
Content-Disposition: form-data; name="username"
0
Content-Disposition: form-data; name="token"
0
Content-Disposition: form-data; name="display_names"
1
Content-Disposition: form-data; name="messages"
1
Content-Disposition: form-data; name="roles"
1
Content-Disposition: form-data; name="votes"
1
------WebKitFormBoundary7MA4YWxkTrZu0gW--
My js function (for testing):
function save() {
var formData = new FormData();
formData.append("status", 0);
formData.append("username", 0);
formData.append("token", 0);
formData.append("display_names", 0);
formData.append("messages", 0);
formData.append("roles", 0);
formData.append("votes", 0);
const Http = new XMLHttpRequest();
const url='http://127.0.0.1:5000/user/181453766040485888';
Http.open("POST", url);
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}
Http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Http.send(formData);
}
my API function that handles the request (abstract):
def post(self, id):
if database.execute(database.SAVE_USER_SETTINGS.format(id, request.form["status"], request.form["username"],
request.form["token"], request.form["display_names"],
request.form["messages"], request.form["roles"],
request.form["votes"])):
return (id, request.form["status"], request.form["username"],
request.form["token"], request.form["display_names"],
request.form["messages"], request.form["roles"],
request.form["votes"]), 201
return {}, 500

Related

ASP.NET Core Cookie not set with CORS

I try to set a auth cookie. The ui and the data server are under different subdomains. So I need to activate CORS.
services.AddCors(options => options.AddPolicy("SubdomainDefault", builder => builder
.WithOrigins("https://ui.domain.de")
.AllowCredentials()
.AllowAnyHeader()
.Build()
));
On the same subdomain the cookie is set, but with different subdomains it is visible in the headers, but not set.
Request URL: https://server2.domain.de/...
Request Method: POST
Status Code: 200 OK
Remote Address: X.X.X.X:443
Referrer Policy: strict-origin-when-cross-origin
Response Header
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://ui.domain.de
Content-Length: 1017
Content-Type: application/json; charset=utf-8
Date: Fri, 29 Oct 2021 10:27:11 GMT
Server: Microsoft-IIS/8.5
Set-Cookie: auth=XXX; domain=.domain.de; path=/; secure; samesite=strict; httponly
Vary: Origin
X-Powered-By: ARR/3.0
Request Headers
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9,en;q=0.8,en-US;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 0
Host: server2.domain.de
Origin: https://ui.domain.de
Pragma: no-cache
Referer: https://ui.domain.de/
sec-ch-ua: "Google Chrome";v="95", "Chromium";v="95", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36
Has anyone a idea?
Assuming your second request is actually a XMLHttpRequest you need to set the withCredentials flag, otherwise the cookies are not sent.
Here's an excerpt from https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#requests_with_credentials:
const invocation = new XMLHttpRequest();
const url = 'https://bar.other/resources/credentialed-content/';
function callOtherDomain() {
if (invocation) {
invocation.open('GET', url, true);
invocation.withCredentials = true;
invocation.onreadystatechange = handler;
invocation.send();
}
}

How to send a XMLHttpRequest

I want to send a request look like this:
POST /accounts/211242/followers HTTP/1.1
Host: website.com
User-Agent: <user-agent>
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: https://website.com
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Content-Length: 0
Connection: close
Cookie: <user-cookie>
But I don't know much about Javascript. I have tried a lot but everything I got just an error. Can anyone create a code for me?
Here what I have tried:
<html>
<head>
<title>CSRF Demo</title>
</head>
<body>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "https://website.com/accounts/211242/followers");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.withCredentials = true;
xmlhttp.send(null);
</script>
</body>
</html>
And after run that code, the browser sends a request:
POST /accounts/211242/followers HTTP/1.1
Host: website.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Origin: null
Connection: close
Cache-Control: max-age=0
Content-Length: 0
Cookie: <user-cookie>
Which don't have 'X-Requested-With: XMLHttpRequest' so the server sends back 400 Bad Request
According to the docs, you should add xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
after opening and before sending the request, to append the desired header.

Status code 415 although headers all seem to be correct

I have an API call on my front end application that uses Axios to make a PUT request. This works from postman but in the browser I get the 415 error. Here are the browser headers:
General
Request URL: api.example.com/foo
Request Method: OPTIONS
Status Code: 415 Unsupported Media Type
Remote Address: ip.address:443
Referrer Policy: no-referrer-when-downgrade
Response Headers
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: *
Content-Length: 175
Content-Type: application/problem+json; charset=utf-8
Date: Mon, 13 Jan 2020 20:03:06 GMT
Request-Context: appId=guid
Server: Microsoft-IIS/10.0
Strict-Transport-Security: max-age=2592000
X-Powered-By: ASP.NET
Request Headers
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: PUT
Cache-Control: no-cache
Connection: keep-alive
Host: api.example.com
Origin: http://localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/extension
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36
My request looks like this:
const url = 'https://api.example.com/foo';
const headers = {
'Content-Type': 'application/json; charset=UTF-8'
};
const data = JSON.stringify([{"name": "SomeName","date": "2020-01-30T14:50:56.636Z"}]);
axios.put(
url,
data,
{headers: headers}
)
.then(res => {
console.log(res);
})
.catch((e) => {
console.log(e);
});
My API is a .net core application. Thank you friends!
I figured out the problem; in the API, the options handlers had some parameters (since I copy pasta'd the PUT request for options) and the browser wasn't sending the parameters in the preflight check, so I was getting 415. Once I removed the parameters, it worked fine!

Unexpected token # in JSON at position 0 with Angular 5 and Express JS

I am developing a MEAN stack application
where My client is in Angular 5 and backend is in node and express js with mongo db as my storage.
I am trying to upload an image from one my Angular Page to my express js rest API which will finally upload the image in AWS cloud
Sample code for my Component is as below having two methods one onFileSelected which sets the selected file and the onUpload which invokes a service class method
private selectedFile:File=null;
onUpload(){
this.productCategoryService.
uploadProductCategoryImage(this.selectedFile).subscribe(
data=>{console.log("Upload success---"+data)},
err=>{console.log("Upload error ---"+err.message)});
}
onFileSelected(event){
this.selectedFile=event.target.files[0];
console.log("this.selectedFile---------"+this.selectedFile);
}
The service does a post call of rest service on express js.Code of my service class is as below
public uploadProductCategoryImage(selectedFile:File){
const formData = new FormData();
formData.append("userFile",selectedFile);
return this.http.post<any>
('http://localhost:3000/datastore/api/aws/api/file',formData);
}
My html page
<input type="file" (change)="onFileSelected($event)" name="userFile">
<button type="button" class="btn btn-success" (click)="onUpload()">
<span class="fa fa-upload"></span>Upload</button>
However when I post this data I get an error as below on the server side
SyntaxError: Unexpected token # in JSON at position 0
at JSON.parse (<anonymous>)
I found something from my browser.It shows BAD request.
I am not sure what is happening.Please suggest.
General------------
Request URL: http://localhost:3000/datastore/api/aws/api/file
Request Method: POST
Status Code: 400 Bad Request
Remote Address: [::1]:3000
Referrer Policy: no-referrer-when-downgrade
Response Header------------
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 1314
Content-Security-Policy: default-src 'self'
Content-Type: text/html; charset=utf-8
Date: Fri, 22 Jun 2018 16:47:12 GMT
X-Content-Type-Options: nosniff
X-Powered-By: Express
Request Header--------------------
Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 232378
Content-Type: application/json
Host: localhost:3000
Origin: http://localhost:4200
Referer: http://localhost:4200/contactus
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36
------WebKitFormBoundaryAEgWhmyP5LdwDaEl
Content-Disposition: form-data; name="userFile"; filename="Screenshot from 2018-06-04 20-23-28.png"
Content-Type: image/png
Thanks
Sachin
In Angular 5 Httpclient uses JSON as default format. So you have use BLOB as your response type like
getImage(imageUrl: string): Observable<Blob> {
return this.httpClient.get(imageUrl, { responseType: 'blob' });
}
Check this link for reference: https://stackblitz.com/edit/angular-1yr75s?file=src%2Fapp%2Fimage.service.ts

How can I replace the 'Accept' http header in AS3

all
I send a http request from flash client(AS3) to a RESTFull service. The server side response json or xml data depend on the 'Accept' parameter in http header. But, I always accept xml format data even if I set the 'Accept' to 'application/json' in the client side. With wireshark I found that there are double 'Accept' parameter in the http header. Can somebody tell me why ? And/or how to get out of this.
POST /psplatform/rest/szdata/all HTTP/1.1
Host: 203.175.156.88:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:26.0) Gecko/20100101 Firefox/26.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-type: application/json
Accept: application/json
Content-length: 8
public function reload():void{
data = new Object();
new URLLoader(createJSONURLRequest("http://203.175.156.88:8080/psplatform/rest/szdata/all")).addEventListener(Event.COMPLETE, loaderCompleteHandler);
}
private function createJSONURLRequest(url:String):URLRequest{
var urlRequest:URLRequest = new URLRequest(url);
urlRequest.method = URLRequestMethod.POST;
urlRequest.contentType = "application/json";
//var urlVariables:URLVariables = new URLVariables("{}");
urlRequest.data = "{name:0}";
urlRequest.requestHeaders.push(new URLRequestHeader("Accept", "application/json"));
return urlRequest;
}