Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

File upload to AEM (local SDK and AEM cloud) via third party react app

Avatar

Employee Advisor

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 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.
8 Replies

Avatar

Community Advisor

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. 

Avatar

Employee Advisor

@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": [
"*"
]
}

Avatar

Community Advisor

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":[
      "*"
   ]
}

 

Avatar

Employee Advisor

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:
*
 

Avatar

Community Advisor

@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)

Avatar

Employee Advisor

@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

Avatar

Community Advisor

@shelly-goel,

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

Avatar

Employee Advisor

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.