Thanks this works (somehow when I tried escaping earlie...

[shelly-goel]

Has anyone tried uploading a file from browser to AEM local sdk as well as AEM cloud via React application (node backend)? How do you get rid of the CORS error in the client?

I tried below in react and it gives me CORS error even if I set the CORS policy config alloworgins to *

const apiEndpoint = `http://localhost:4502/api/assets/amex.json`;

    const res = await fetch(apiEndpoint, {

      headers: {

        // Authorization: `Bearer ${token}`,

        Authorization: `Basic ${Buffer.from(`admin:admin`, 'binary').toString(

          'base64',

        )}`,

      },

    });

I also get connection refused when I move this code to node backend. Please suggest.

[Vijayalakshmi_S]

Hi @shelly-goel,

If you are referring to aem-upload - https://github.com/adobe/aem-upload NPM Module (which is the way for upload asset/binary in AEM as cloud service), then cross check if you have added "PUT" method as "Allowed Methods" in Adobe Granite Cross-Origin Resource Sharing Policy OSGI config. 

Internally, part upload request is of type PUT. 

[shelly-goel]

@Vijayalakshmi_S- Yes th method is there but it doesn't work in localhost. So I'm trying to deploy it to cloud and now facing another issue. Config file appears here: /apps/<project-name>config/com.adobe.granite.cors.impl.CORSPolicyImpl~firefly.cfg.json but not in the system console so the changes are not applied. Would you know how to resolve this?

There's an oob CORS config with label 'abode', it has below content in it and it works fine:

// Configuration created by Apache Sling JCR Installer
{
"supportscredentials": false,
"exposedheaders": [
"Link",
"Etag",
"Version",
"Revision",
"Content-MD5",
"Location",
"Content-Location",
"asset-id",
"x-resource-id",
"x-medialibrary-version"
],
"supportedmethods": [
"GET",
"HEAD",
"POST",
"PUT",
"DELETE",
"PATCH"
],
"alloworigin": [
""
],
"maxage:Integer": 86400,
"alloworiginregexp": [
"https://.*\\.adobe\\.com",
"https://.*\\.adobe\\.net"
],
"allowedpaths": [
".*"
],
"supportedheaders": [
"*"
]
}

I have created the new config with below but it gives json parse error on deploy due to the the regex "https://.*\.adobeio-static\.net". Please suggest.

{
"supportscredentials": true,
"exposedheaders": [
""
],
"supportedmethods": [
"GET",
"HEAD",
"POST",
"PUT",
"DELETE",
"OPTIONS"
],
"alloworigin": [
""
],
"maxage:Integer": 1800,
"alloworiginregexp": [
"https://.*\.adobeio-static\.net"
],
"allowedpaths": [
".*"
],
"supportedheaders": [
"*"
]
}

[Vijayalakshmi_S]

Hi @shelly-goel,

Use the below JSON. JSON parse error is because of not handling Escaping in the regex string. 

{
   "supportscredentials":true,
   "exposedheaders":[
      ""
   ],
   "supportedmethods":[
      "GET",
      "HEAD",
      "POST",
      "PUT",
      "DELETE",
      "OPTIONS"
   ],
   "alloworigin":[
      ""
   ],
   "maxage:Integer":1800,
   "alloworiginregexp":[
      "https://.*\\.adobeio-static\\.net"
   ],
   "allowedpaths":[
      ".*"
   ],
   "supportedheaders":[
      "*"
   ]
}

[shelly-goel]

Thanks @Vijayalakshmi_S  this works (somehow when I tried escaping earlier it did not work).

For the development purposes for now, I've kept the crossorigin=* as testing from localhost and not actual adobe-static domain.

Even though I don't get CORS error now but aem-upload sdk when trying to make initiateUpload.json call is throwing 403 error. I tried the same request with same authorization token in postman and that works. I can also see 'access-control-allow-origin':* in response headers. I fail to understand why it is not ready to respond to the request from client. Can it be due to localhost by any chance?

access-control-allow-origin:

*

[Vijayalakshmi_S]

@shelly-goel,

Can you share the complete targetUrl(full initiateUpload call url) that you are using in the code. Also this time are you accessing from local cloud service SDK instance(localhost SDK aem instance) or React local (Eg: localhost:3000)

[shelly-goel]

@Vijayalakshmi_S  React app is running in localhost (it's actually a firefly app). Below is the complete URL of the request. aem-upload sdk makes this call internally though I also tried making this call explicitly and get the same error (403). This same call with same authorization header works fine in postman. I also tried it from adobe-static domain and get CORS error there though alloworigin is *

https://author-<env details>.adobeaemcloud.com/content/dam/<foldername>.initiateUpload.json

[Vijayalakshmi_S]

@shelly-goel,

Can you try to explicitly set the origin instead of "*".  Also is the flow working fine from Cloud service local SDK instance?

[shelly-goel]

It's a firefly app so cloud would not be able to communicate with local instance. Yes we have tried specific origin as well and same issue persists.