CODEWITHSUNDEEP
ajaxazureblobazure-storagecors
Paul
Paul

Reputation: 385

CORS and Azure Storage (PHP)

I am trying to use the PHP SDK for Windows Azure -- which doesn't have support for CORS nor does it have support for shared access keys.

After rewriting the SDK to allow me to generate SAS's and the requisite query string, and also rewriting it for the Thanksgiving update which allows CORS updates to Storage thru the REST API, I have reached a stuck point.

I successfully create SAS's and can read in files through them. Likewise, my CORS request was as follows:

<StorageServiceProperties>
  <Cors>
    <CorsRule>
      <AllowedOrigins>
         *
      </AllowedOrigins>
      <AllowedMethods>
        GET, PUT, POST, DELETE, HEAD, OPTIONS
      </AllowedMethods>
      <MaxAgeInSeconds>
        500
      </MaxAgeInSeconds>
      <ExposedHeaders>
        x-ms-meta-data*,x-ms-meta-customheader
      </ExposedHeaders>
      <AllowedHeaders>
        x-ms-meta-target*,x-ms-meta-customheader
      </AllowedHeaders>
    </CorsRule>
  </Cors>
  <DefaultServiceVersion>
    2013-08-15
  </DefaultServiceVersion>
</StorageServiceProperties>

To which I receive the response HTTP_Request2_Response Object ( [version:protected] => 1.1 [code:protected] => 202 [reasonPhrase:protected] => Accepted [effectiveUrl:protected] => <mysite>?restype=service&comp=properties [headers:protected] => Array ( [transfer-encoding] => chunked [server] => Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0 [x-ms-request-id] => 59bc0e05-4767-4953-9df1-2d2a6a9054bc [x-ms-version] => 2013-08-15 [date] => Fri, 13 Dec 2013 11:23:49 GMT ) [cookies:protected] => Array ( ) [lastHeader:protected] => date [body:protected] => [bodyEncoded:protected] => 1 )

I also checked by malforming any part of the input, and it indeed fails and sends 400 Failure responses.

So now I wrote an app on my webpage which should allow users to upload files directly to the storage account, but I still receive the errors

OPTIONS <mystorage> 403 (Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.) jquery.js:8706 OPTIONS <mystorage> No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<mysite>' is therefore not allowed access. jquery.js:8706 XMLHttpRequest cannot load <mystorage>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin <mysite> is therefore not allowed access. azure_blob.html:1 error

And I don't know where to continue from here... I feel like I've enabled CORS, and I feel like I have the SAS working, but it tells me CORS support is off for my storage account, and I'm not sure how to even check if that's true through the REST API / Azure SDK

EDIT: Thanks Guarav... The issue was indeed adding content-type to my header

To anybody who sees this soon: I will fix up the code, make it nice, and implement a few other things and then submit a pull request to the PHP SDK so you don't have to go through this again.

I only implemented CORS w/ regards to the new updates. I will go in and implement the other serviceProperty updates, and perhaps other things, before submitting the request.

Upvotes: 1

Views: 1114

Answers (1)

Gaurav Mantri
Gaurav Mantri

Reputation: 136196

Try adding the following headers in your <AllowedHeaders> section in CORS request:

  • x-ms-* (will take care of headers type x-ms-blob-type etc.)
  • Content-Length (I noticed in my experimentation with CORS that this is automatically added by the browser and if I don't include it in my CORS headers, I get 403 error).
  • Accept (I noticed in my experimentation with CORS that this is automatically added by the browser and if I don't include it in my CORS headers, I get 403 error).
  • Content-Type

Or you can trace the request through a tool like Fiddler and see what all request headers are sent in the request and match them against your CORS rule.

Upvotes: 1

Related Questions