Observing CORS error while using JS API 4.27 in a custom React application

[LAProAg]

We are experiencing CORS error when application is deployed. No errors while accessing through localhost:

Access to fetch at 'https://js.arcgis.com/4.27/@arcgis/core/assets/esri/widgets/Zoom/t9n/Zoom_en.json' from origin '<our application>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

After doing some research it seems we have to use 

import Config from "@arcgis/core/config"; module and add 

  Config.request.trustedServers?.push("[https://js.arcgis.com/]");

but when I do that I get these errors:

Logger.js:5 [esri.widgets.Attribution] widget-intl:locale-error esri.widgets.Attribution

1. s {name: 'intl:message-bundle-error', details: {…}, message: 'Errors occurred while loading "esri/widgets/Attribution/t9n/Attribution"'}
1. details: {errors: Array(1)}
2. message: "Errors occurred while loading \"esri/widgets/Attribution/t9n/Attribution\""
3. name: "intl:message-bundle-error"
4. [[Prototype]]: e

Has anyone experience any issues like this. Would really appreciate any help in this

Thanks

-Luv

[Sage_Wall]

This seems really strange to me.  Are you still seeing the same error @LAProAg?  When I go to the URL provided I see the appropriate Access-Control-Allow-Origin header in the response. Is it possible something on your network like an application firewall, proxy or something else is overwriting the header and setting it to another value or removing the header all together in the response?  If you open the network tab in your browser and go to that url do you see a * for the Access-Control-Allow-Origin header value or something else? You also might want to try the request using and not using your corporate vpn and see if that makes any difference.

[LAProAg]

Hi @Sage_Wall Thank you for your reply. I really appreciate it. Accessing any js.arcgis.com URL directly  I also see the appropriate Access-Control-Allow-Origin header in the response. Even with localhost I dont see any CORS errors. Our application is deployed using AWS elastic beanstalk in linux ubuntu environment. Currently the application is only available through private subnet so can only be accessed via vpn. And yes still no luck resolving it. 

[Lerman]

Hi, why not use local assets? https://developers.arcgis.com/javascript/latest/es-modules/#managing-assets-locally

[LAProAg]

Hi Lerman! Yes, we ended up doing that. Thanks. and that resolved the CORS issue for js.arcgis.com. Now realized i have more CORS errors from federated arcgis server, services.arcgisonline.com and cdn.arcgis.com.

Any idea how would you resolve these? Is it related to the settings on the web server? Our application is deployed on AWS Elastic Beanstalk.

Thanks

-Luv

[Lerman]

Hi LAProAg!  I think it is because the request contains a custom header (x-amzn-trace-id), and the server-side (arcigs online) Access-Control-Allow-Headers value does not contain this header field, so it generates the error reported in the screenshot. Since you can't change the Access-Control-Allow-Headers value of arcgis online, I think you have to remove this custom header.

[LAProAg]

Hi Lerman! Thanks for pointing it out and now no CORS errors, there was the amazon xray traceid header that we had set as true. Setting that to false resolved the issue. But now getting this error (attached) of invalid redirect_uri. I do have the correct redirect Uri name (the url for our react application) in our arcgis portal to obtain the AppID and using in our react application. Any idea on this error? 

Thank you again!

[Lerman]

Hi LAProAg! Is the redirect_uri in this request parameter the same as the redirect_uri you filled in the app you registered in portal? Do you use the IdentityManager.registerOAuthInfos method in your application?

[LAProAg]

All the issues are resolved. Thanks both @Sage_Wall and @Lerman for your suggestions. For CORS issue we ended up managing package locally and also the Amazon Xray traceid header was causing the CORS issue.

To resolve the redirect URL error by fixing the way API calls were being made. So, the fix was to do the auth on the home view so that the user is authenticated at root "/". 

[Sage_Wall]

I'm so glad you got everything working @LAProAg !