CORS behavior mismatch between client and REST API

Question

CORS behavior mismatch between client and REST API

Chris Dailey 0

I'm trying to list (and eventually download) blobs using a SAS token. This works fine with the REST API, but when I try to do the same thing with the JS/TS client, I get like 8 CORS errors, I guess from the preflight getting rejected. This is weird to me because I have CORS exceptions loaded and I can list blobs using the SAS token by hitting the REST API. I feel like I must be missing something; what am I not getting?

User's image

Ravi Kanth Koppala 3,396 Reputation points Microsoft Employee Moderator

2023-12-19T01:38:57.62+00:00
@Chris Dailey

The reason you are getting CORS errors when using the JS/TS client to access Azure Storage with a SAS token is likely due to a mismatch between the CORS behavior of the client and the REST API. While you may have CORS exceptions loaded for the REST API, the client may not be configured to handle CORS requests in the same way.

To resolve this issue, you can configure CORS for the Azure Storage service to communicate to the JS/TS client that requests from the source domain are trusted by Azure Storage. You can do this by following the instructions in the "Cross-origin resource sharing (CORS) support for Azure Storage" article.

In addition, you can also check that the SAS token you are using has the appropriate permissions to access the resources you are trying to access.

References:

Cross-origin resource sharing (CORS) support for Azure Storage

Grant limited access to Azure Storage resources using shared access signatures (SAS)

AI Note: This answer is generated using the Microsoft Q&A AI Assist tool.
Anand Prakash Yadav 7,865 Reputation points Microsoft External Staff

2023-12-21T11:06:25.45+00:00

Just checking in to see if the below-answer helped. If this answers your query, do click "Accept the answer” for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

1 answer

Your answer

Ravi Kanth Koppala 3,396 Reputation points Microsoft Employee Moderator

2023-12-19T01:38:57.62+00:00

@Chris Dailey

The reason you are getting CORS errors when using the JS/TS client to access Azure Storage with a SAS token is likely due to a mismatch between the CORS behavior of the client and the REST API. While you may have CORS exceptions loaded for the REST API, the client may not be configured to handle CORS requests in the same way.

To resolve this issue, you can configure CORS for the Azure Storage service to communicate to the JS/TS client that requests from the source domain are trusted by Azure Storage. You can do this by following the instructions in the "Cross-origin resource sharing (CORS) support for Azure Storage" article.

In addition, you can also check that the SAS token you are using has the appropriate permissions to access the resources you are trying to access.

References:

Cross-origin resource sharing (CORS) support for Azure Storage

Grant limited access to Azure Storage resources using shared access signatures (SAS)

AI Note: This answer is generated using the Microsoft Q&A AI Assist tool.
Anand Prakash Yadav 7,865 Reputation points Microsoft External Staff

2023-12-21T11:06:25.45+00:00

Just checking in to see if the below-answer helped. If this answers your query, do click "Accept the answer” for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

Answer 1

Hello @Chris Dailey,

Thanks for your query.

If the CORS configuration isn't setup correctly, the browser console will present an error like "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite" indicating that the request was blocked due to violating the CORS security rules.
Part of the error text is a "reason" message that provides added insight into what went wrong. The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.
Reason: CORS request did not succeed: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed

In many cases, it is caused by a browser plugin (e.g. an ad blocker or privacy protector) blocking the request.
Other possible causes include:
Trying to access an https resource that has an invalid certificate will cause this error.
Trying to access an http resource from a page with an https origin will also cause this error.
As of Firefox 68, https pages are not permitted to access http://localhost, although this may be changed by Bug 1488740.
The server did not respond to the actual request (even if it responded to the Preflight request). One scenario might be an HTTP service being developed that panicked without returning any data.

CORS errors: https://learn.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services

Anand Prakash Yadav 7,865 Reputation points Microsoft External Staff

2023-12-22T11:53:02.1033333+00:00

Just checking in to see if the below-answer helped. If this answers your query, do click "Accept the answer” for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

Share via

CORS behavior mismatch between client and REST API

1 answer

Your answer