I'm sending file to WebApi using Jquery.ajax
I have an ASP.NET method that receives file
[HttpPost]
[ActionName("import")]
public int Import([FromBody]IFormFile upload)
Inside Import method a can save Request.Body and it looks correct:
------WebKitFormBoundaryZLHvtGDqa5zp0JHB Content-Disposition: form-data; name="upload"; filename="test.b3d"
Content-Type: application/octet-stream
Hello world content!
but upload variable is always null! What should I fix to have file contents inside "upload" variable?
PS: I send file to server using this code:
// Create a formdata object and add the files
var data = new FormData();
data.append("upload", file.files[0]);
jQuery.ajax({
type: "POST",
url: "/api/designer/import",
contentType: "application/json",
dataType: 'json',
processData: false,
data: data
})
The request headers in Chrome:
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,ru;q=0.6
Connection:keep-alive
Content-Length:28855
Content-Type:application/x-www-form-urlencoded
Host:localhost:64867
Origin:http://localhost:64867
Referer:http://localhost:64867/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36
X-Requested-With:XMLHttpRequest
Remove the FromBody attribute decorated on the parameter to enable binding data of application/x-www-form-urlencoded format.
This is a change from how existing Web API works. You can use FromBody in cases other than application/x-www-form-urlencoded, like application/json, application/xml etc.
Related
I am getting following error wile doing axios post request.
But when I use ajax request there is no issue:
request 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.
Ajax Request:
Axios request:
let payload = {
type: ["a", "b"],
category: ["a", "b"],
category: ["a", "b"],
accountNumber: "123"
};
var apiURL = this.$apiBaseURL + "/Product/ProductDetails";
$.ajax({
url: apiURL,
type: "POST",
data: { payload },
xhrFields: {
withCredentials: true
},
success: function (result) {
console.log(JSON.stringify(result));
}
});
this.$http.post(apiURL,payload,{withCredentials: true})
**UPDATE 1 **
I am still facing the same issue. Here I will share the request header in both ajax and axios request
AJAX Working code and request header :
{
var apiURL = this.$apiBaseURL + "/Request/MediaUpload";
$.ajax({
method: 'post',
processData: false,
contentType: false,
cache: false,
data: fileformData,
enctype: 'multipart/form-data',
url: apiURL,
xhrFields: {
withCredentials: true
}
});
}
Request header:
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 7610
Content-Type: multipart/form-data; boundary=----
WebKitFormBoundaryAjc8HwVPaRtQ5Iby
Host: localhost:62148
Origin: http://localhost:8989
Referer: http://localhost:8989/
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/79.0.3945.130 Safari/537.36
AXIOS failing code and header
var apiURL = this.$apiBaseURL + "/Request/MediaUpload";
var self=this;
let config={
headers:{
'Content-Type': 'multipart/form-data'
}
}
this.$http.post(apiURL, { withCredentials: true },fileformData,
config)
Request Headers:
Provisional headers are shown
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
Referer: http://localhost:8989/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
Here is my web api config where I have enabled cors
string origin = "http://localhost:8989";
EnableCorsAttribute cors = new EnableCorsAttribute(origin, "*", "*", "*");
cors.SupportsCredentials = true;
config.EnableCors(cors);
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
**UPDATE 2 **
The CORS configuration at server side is done correctly thats why I am able to make the call successfully via AJAX.
Is this a known AXIOS issue which occurs only when we enable the windows authentication?
This issue arises because jQuery sends the request as application/x-www-form-urlencoded by default and does not send preflight request whereas axios sends as application/json and sends a preflight request i.e. OPTIONS before sending actual request.
One way it could work is by setting Content-type header to 'Content-Type': 'application/x-www-form-urlencoded' in axios.
You will have to change the settings on server side to get around this issue.
Add this in your web.config file:
<system.webServer>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
Using default ajax won't send any OPTIONS request, but using axios does. This will enable accepting OPTIONS requests.
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
I am trying to upload file to S3 directly from client. Here is my code to upload:
var s3Options={
"params":{
"key":options.folder+'/'+recordId+extn,
'AWSAccessKeyId':policy.s3Key,
'acl':'private',
'policy':policy.s3PolicyBase64,
'signature':policy.s3Signature,
'Content-Type':fileData.type,
'Content-Length': fileData.size,
'file':fileData,
"enctype":"multipart/form-data",
}
}
Now I am trying to upload a image and file gets uploaded but instead of image, the content-type in request is binary/octet-stream and when I access the file in app, it shows me message in console:
Resource interpreted as Image but transferred with MIME type binary/octet-stream:
Here is how I am uploading the file:
HTTP.put('https://'+process.env.S3_BUCKET+'.s3.amazonaws.com/'+options.folder+'/'+recordId+extn ,s3Options,function(error,result){
console.log("put file", error, result)
}
Now lets say my file's url is https://myBucket.s3.amazonaws.com/User/avatar/profile.png. Here is the content of file:
This is the put request sent to upload the file:
Remote Address:xxxxx
Request URL:https://myBucket.s3.amazonaws.com/User/avatar/profile.png
Request Method:PUT
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0
Host:myBucket.s3.amazonaws.com
Origin:http://localhost:3000
Referer:http://localhost:3000/avatar
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
Response Headersview source
Access-Control-Allow-Methods:HEAD, GET, PUT, POST, DELETE
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:ETag, x-amz-meta-custom-header
Content-Length:0
Date:Wed, 25 Feb 2015 10:42:51 GMT
ETag:"xxxxxxxxx"
Server:AmazonS3
Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-id-2:yyyyyyyyyyyy
x-amz-request-id:DDDDDDDDDDD
I have verified the content-type set in s3Options and it is image/png.
I am trying to set up authorization on an Ember App running on a Node.js server.
I am using the oauth2 Authenticator, which is requesting a token from the server. This is working fine. I am able to provide the app with a token, which it saves in the local-storage.
However, when I make subsequent requests, the authorizer is not adding the token to the header, I have initialized the authorizer using the method described in the documentation (http://ember-simple-auth.simplabs.com/ember-simple-auth-oauth2-api-docs.html):
Ember.Application.initializer({
name: 'authentication',
initialize: function(container, application) {
Ember.SimpleAuth.setup(container, application, {
authorizerFactory: 'authorizer:oauth2-bearer'
});
}
});
var App = Ember.Application.create();
And I have added an init method to the Authorizer, to log a message to the server when it is initialized, so I know that it is being loaded. The only thing is, the authorize method of the authorizer is never called.
It feels like I am missing a fundamental concept of the library.
I have a users route which I have protected using the AuthenticatedRouteMixin like so:
App.UsersRoute = Ember.Route.extend(Ember.SimpleAuth.AuthenticatedRouteMixin, {
model: function() {
return this.get('store').find('user');
}
});
Which is fetching the data, fine, and redirects to /login if no token is in the session, but the request headers do not include the token:
GET /users HTTP/1.1
Host: *****
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
Accept: application/json, text/javascript, */*; q=0.01
Origin: *****
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36
Referer: *****
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Any help you could give me would be greatly appreciated.
Is your REST API served on a different origin than the app is loaded from maybe? Ember.SimpleAuth does not authorizer cross origin requests by default (see here: https://github.com/simplabs/ember-simple-auth#cross-origin-authorization)
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;
}