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.
Related
Is there something different that needs to be done when uploading a file? Every other call (Axios/Vue put) works fine except where a file is getting uploaded. It's going from example.com to api.example.com. Everything works fine locally hitting different ports.
ConfigureServices:
services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.SetIsOriginAllowedToAllowWildcardSubdomains();
//.WithOrigins("http://*.example.com"); //tried adding, nothing works when it's here
}));
Configure:
app.UseCors("CorsPolicy");
And the controller:
[ApiController]
[EnableCors("CorsPolicy")]
public class MyController : ControllerBase {
Public Model Put([FromForm] ICollection<IFormFile> files, [FromForm] string jsonString)
The browser output:
Access to XMLHttpRequest at 'http://api.example.com/api/YourKnowledge' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Request URL: http://api.example.com/api/YourKnowledge
Referrer Policy: strict-origin-when-cross-origin
Date: Sat, 03 Oct 2020 19:58:42 GMT
Server: Microsoft-IIS/10.0
Transfer-Encoding: chunked
X-Powered-By: ASP.NET
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 10219
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryvIG7idij6Og7BH8r
Host: api.example.com
Origin: http://example.com
Referer: http://example.com/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36
files: (binary)
jsonString:{}
Last note, I did find this Asp.Net Core API CORS policy error only in file upload, but I won't have just images uploaded. Did try setting it to test, but it didn't make a difference.
I think you couldn't add two parameter with [FromForm]
(I know that its the rule at least in [FromBody]).
please let me know that works
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!
I am trying to make a post XMLHttpRequest from a host to different host.I am able to make OPTIONS and it is returning 200 code.
Options Call Information:
Response Headers:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Authorization, Accept
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS, PATCH
Access-Control-Allow-Origin:http://localhost
Cache-Control:must-revalidate, no-cache
Content-Length:0
Date:Wed, 13 Dec 2017 08:44:42 GMT
Server:Microsoft-IIS/10.0
Request Headers
Accept:/
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.9
Access-Control-Request-Headers:access-control-allow-headers,access-control-allow-origin,content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:"someHostAddress"
Origin:http://localhost
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
And I am getting this error after that and I am not able to make a post call.
My Headers :
xhr.setRequestHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers,Origin,Content-Type,Accept");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.setRequestHeader("Content-type", "application/json");
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
Thanks in advance.
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.
I'm trying to do a cross-domain request. Looks like all the headers are ok. However the cookie is not set and I don't know why. Can it be because the 401 server status (no access to change server) or because the request is from http to a https server?
these are the headers:
Request URL:https://domain/current-user
Request Method:GET
Status Code:401 Unauthorized
**Request Headers**
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:app.domain.com
Origin:http://domain.com
Pragma:no-cache
Referer:http://domain.com/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.93 Safari/537.36
**Response Headers**
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:accept, origin, content-type, cookie
Access-Control-Allow-Methods:GET,POST
Access-Control-Allow-Origin:http://domain.com
Access-Control-Max-Age:1728000
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=utf-8
Date:Sun, 02 Jun 2013 16:52:58 GMT
P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"
Server:nginx/1.1.19
Set-Cookie:domain.ssid=s%3A7GcUvlVmeOgVF5sgyIHCjNn8.S%2FFDoCTOU5q4bT4zNQAECCGg%2FQmKkb9bT7Ee2KaLP2o; Path=/; Expires=Mon, 30 Sep 2013 16:52:58 GMT
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-Cache:MISS
X-Powered-By:Express
Try setting withCredentials on the request, e.g.
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;