4

I want to store a file to azure blob data through angular2 . so that i have created a storage with name "mysampleoxy"

and then created a container "videos" under blob. Now i want to upload the file from my local server to the Azure so that , i have created a sas key with url https://mysampleoxy.blob.core.windows.net/?sv=2016-05-31&ss=bfqt&srt=sco&sp=rwdlacup&se=2017-05-30T04:20:04Z&st=2017-05-29T11:20:04Z&spr=https&sig=4Ir2JxigytwHfbyhhY1K4dOWAgZvvZnEzbNKqB4cjSA%3D

and i have enabled the cors for blob with the below details

<CorsRule>
  <AllowedOrigins>*</AllowedOrigins>
  <AllowedMethods>PUT,GET</AllowedMethods>
  <AllowedHeaders>x-ms-meta-data*,x-ms-meta-target,x-ms-meta-source</AllowedHeaders>
  <ExposedHeaders>x-ms-meta-*</ExposedHeaders>
  <MaxAgeInSeconds>200</MaxAgeInSeconds>
</CorsRule>

But when i am trying to upload the file through my server the below error is showing in the console

<?xml version="1.0" encoding="utf-8"?>

<Error><Code>UnsupportedHttpVerb</Code>

<Message>The resource doesn't support specified Http Verb.
RequestId:fa9c21f3-0001-005a-1484-d83478000000
Time:2017-05-29T14:02:25.2296729Z</Message>

</Error>

and the Headers were :

Request URL: https://mysampleoxy.blob.core.windows.net/?sv=2016-05-31&ss=bfqt&srt=sco&sp=rwdlacup&comp=list&se=2017-05-30T01:21:04Z&st=2017-05-29T11:30:04Z&spr=https&sig=Ko5UzKrjRHhvQIJG2fpgGMgPiZiVxMhLTwNZbaiFNeA%3D

Request Method: PUT

Status Code: 405 The resource doesn't support specified Http Verb.

Remote Address: 52.172.16.136:443

Referrer Policy: no-referrer-when-downgrade i am not getting anything wrong with my cors configuration. any solutions regarding this could help me resolve this.

Thank you.

Chinna M
  • 415
  • 2
  • 4
  • 17

2 Answers2

3

Your request URL is incorrect. It should include the container name and the name of the file. So if you're uploading "file.mov" (example) under "videos" container, your request URL should be:

https://mysampleoxy.blob.core.windows.net/videos/file.mov?sv=2016-05-31&ss=bfqt&srt=sco&sp=rwdlacup&comp=list&se=2017-05-30T01:21:04Z&st=2017-05-29T11:30:04Z&spr=https&sig=Ko5UzKrjRHhvQIJG2fpgGMgPiZiVxMhLTwNZbaiFNeA%3D

I would also recommend changing AllowedHeaders & ExposedHeaders in CORS configuration to * (i.e. allow all headers & return all headers). A slight mismatch in these headers will result in 403 error from Azure Storage. So your CORS configuration would be:

<CorsRule>
  <AllowedOrigins>*</AllowedOrigins>
  <AllowedMethods>PUT,GET</AllowedMethods>
  <AllowedHeaders>*</AllowedHeaders>
  <ExposedHeaders>*</ExposedHeaders>
  <MaxAgeInSeconds>200</MaxAgeInSeconds>
</CorsRule>
Gaurav Mantri
  • 128,066
  • 12
  • 206
  • 241
  • Awesome solution, thank you. i have updated my CORS configuration and urls with your suggestions. and it is worked for me. Thank you Gaurav. – Chinna M May 29 '17 at 17:50
  • I have the same problem, but I'm getting `HTTP/1.1 400 The requested URI does not represent any resource on the server.` if I include the file name. – Timo Oct 25 '17 at 14:50
  • 1
    ...and to solve my own problem, remove `restype=container` and `comp=list` from the url params and make sure that `x-ms-blob-type` header is included in the request. – Timo Oct 25 '17 at 15:20
3

I was attempting to use POST, whereas PUT method was necessary.

Working code:

const url = `${baseURL}/${containerName}/${file.name}?${Container_SAS}`;
      const response = await fetch(url,
                {
                    method: 'PUT',
                    headers: {
                        'x-ms-blob-type': 'BlockBlob',
                    },
                    body: file
                });
      console.log('response', response.statusText, response.status)
max3d
  • 1,437
  • 15
  • 16