UnsupportedHttpVerb : The resource doesn't support specified Http Verb. RequestId:fa9c21f3-0001-005a-1484-d83478000000

1
votes

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.

2
azurecorsblobazure-blob-storageangular2-forms

2 Answers

2
votes

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>
2
votes

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)