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

Avatar

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile
shelly-goel
MVP

18-06-2021

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.

Replies

Avatar

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

573 likes

Total Posts

728 posts

Correct reply

240 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

573 likes

Total Posts

728 posts

Correct reply

240 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
Vijayalakshmi_S
MVP

21-06-2021

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

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile
shelly-goel
MVP

21-06-2021

@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

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

573 likes

Total Posts

728 posts

Correct reply

240 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

573 likes

Total Posts

728 posts

Correct reply

240 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
Vijayalakshmi_S
MVP

22-06-2021

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

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile
shelly-goel
MVP

25-06-2021

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

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

573 likes

Total Posts

728 posts

Correct reply

240 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

573 likes

Total Posts

728 posts

Correct reply

240 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
Vijayalakshmi_S
MVP

25-06-2021

@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

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile
shelly-goel
MVP

25-06-2021

@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

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

573 likes

Total Posts

728 posts

Correct reply

240 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

573 likes

Total Posts

728 posts

Correct reply

240 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
Vijayalakshmi_S
MVP

28-06-2021

@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

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

249 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile
shelly-goel
MVP

29-06-2021

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.