File upload to AEM (local SDK and AEM cloud) via third party react app | Community
Skip to main content
shelly-goel
Adobe Employee
shelly-goelAdobe Employee
Adobe Employee
June 18, 2021

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

  • June 18, 2021
  • 1 reply
  • 2295 views

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.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Vijayalakshmi_S
Vijayalakshmi_S
Level 10
June 21, 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. 

    shelly-goel
    Adobe Employee
    shelly-goelAdobe EmployeeAuthor
    Adobe Employee
    June 22, 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": [
    "*"
    ]
    }

      Terms & ConditionsAccessibility statement

      Loading footer...