403 (CORS not enabled or no matching rule found for this request.) [VueJs]

Question

I am using an HTTP request to upload an image to the Azure storage, It's work for me when the CORS of the storage account is general, for example:

allowed origins: *
allowed methods: 7 selected (which all options)
allowed headers: *
exposed headers: *
max age: 0

And in my Http request (sing axios):

headers: {
     "Access-Control-Allow-Origin" : "*",
     "Access-Control-Allow-Methods": "*",
     "Access-Control-Allow-Headers": "*",
     "Content-Type": "image/png",
     "x-ms-date": currentDate,
     "x-ms-version": ""2017-11-09"",
     "x-ms-blob-type": "BlockBlob",
}

It's work with me and image uploaded, but when I modified the CORS to add some constraints, it does not work. for example:

allowed origins: https://XXXXXXXX.blob.core.windows.net/
allowed methods: 7 selected (which all options)
allowed headers: Authorization,x-ms-*
exposed headers: x-ms-meta-*
max age: 3600

And in my HTTP request (sing axios):

headers: {
     "Access-Control-Allow-Origin" : "https://XXXXXXXX.blob.core.windows.net/",
     "Access-Control-Allow-Methods": "PUT,GET,PATCH,POST,HEAD,DELETE,MERGE,OPTIONS",
     "Access-Control-Allow-Headers": "Authorization,x-ms-*,content-*",
     "Content-Type": "image/png",
     "x-ms-date": currentDate,
     "x-ms-version": ""2017-11-09"",
     "x-ms-blob-type": "BlockBlob",
}

I faced two Error messages:

OPTIONS https://XXXXXXXXXX.blob.core.windows.net/user-avatar/XXXXXXXXXXXXXXXXXXXXXXXX 403 (CORS not enabled or no matching rule found for this request.)

Failed to load https://XXXXXXXXXX.blob.core.windows.net/user-avatar/XXXXXXXXXXXXXXXXXXXXXXXX: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

How should I solve the problem?

adding random headers (like response headers into a request) will trigger CORS preflight - and if your server doesn't expect preflight (OPTIONS request) then you'll definitely get issues — Jaromanda X, Aug 19 '18 at 06:10

learner · Answer 1 · 2018-08-19T05:49:21.907

1

Change this line

"Access-Control-Allow-Origin" : "https://XXXXXXXX.blob.core.windows.net/",

to

"Access-Control-Allow-Origin" : "localhost:8080/",

Have a look CORS - How do 'preflight' an httprequest?

edited Aug 19 '18 at 05:49

answered Aug 19 '18 at 05:46

learner

3,560
3
42
87

1

umm, what this answer suppose op do? especially if the server is on blob.core.windows.net? – Bagus Tesa Aug 19 '18 at 05:47
2

@BagusTesa The `Access-Control-Allow-Origin` refers to the **clients** allowed to connect. OP's error message indicates they are connecting from `localhost:8080` – Phil Aug 19 '18 at 05:48
1

It doesn't matter what the server is. The client server matters here. So, if one is making a request from localhost:8080, he should add this to access-control. – learner Aug 19 '18 at 05:49
1

oh i see, i did not saw that `localhost:8080`. at a glance i only saw op says request. – Bagus Tesa Aug 19 '18 at 06:03
@learner do I need to add this also in Azure CORS? – Mohd Ali Aug 19 '18 at 09:44

403 (CORS not enabled or no matching rule found for this request.) [VueJs]

1 Answers1