aws-lex-web-ui icon indicating copy to clipboard operation
aws-lex-web-ui copied to clipboard

Published 20 hours ago • verified publisher icon aws-samples

CORS error

Open UCSBConrad opened this issue 2 years ago • 2 comments

I ran into a CORS issue when moving the chatbot lex-web-ui to the production environment. It was previously working fine in three dev environments.

I updated the CloudFormation stack to v0.19.4. I modified the following files: custom-chatbot-style.css, index.html, lex-web-ui.min.js, lex-web-ui-loader.min.js.

The lex-web-ui-loader-config.json and iFrame both have the correct parent origin URL.

This is only occurring on some devices and across all browsers, apparently due to browser security settings? It's also happening on all Incogntio/Private browser windows.

Please let me know if you need additional info.

CORS Error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dp7w8d89zpfl1.cloudfront.net/lex-web-ui-loader-config.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Error: error getting chatbot UI config from url: https://dp7w8d89zpfl1.cloudfront.net/./lex-web-ui-loader-config.json onerror config-loader.js:82 contact-us:1645:39 https://www.it.ucsb.edu/contact-us:1645

UCSBConrad avatar Apr 19 '22 15:04 UCSBConrad

@radycle I tried the site above just now and was able to successfully load and use the bot at the contact-us url above using both private and normal browser windows. Did any of the steps help at https://github.com/aws-samples/aws-lex-web-ui/issues/374#issuecomment-1098085500 help?

bobpskier avatar Apr 19 '22 18:04 bobpskier

@bobpskier sort of. The error I initially reported was from Firefox, which resolved after going through the steps outlined in #374. I'm still getting this error in Chrome Incognito, though. It is still also not loading for others in standard browser mode, while others don't have this issue at all. All of the settings are the same as #374 (comment)

1 and 2 are correct.

  1. The lex-web-ui-loader-config.json file is correct, although the error states this file is missing the Access-Control-Allow-Origin header.

I did have three additional outdated config json files with their corresponding last modified date format tacked on: lex-web-ui-loader-config.20220125011805.json lex-web-ui-loader-config.20220125011618.json lex-web-ui-loader-config.20220329191617.json

This never happened in my dev environments. I deleted those.

  1. Invalidated it again
  2. No geographic restrictions
  3. No VPNs on the browser client side
  4. Cleared browser client caches
  5. Tested with an incognito and private browser window
  6. Switched the CloudFront distribution behavior to legacy CORS policy mode, invalidated distribution, tested again, then set it back to the new CORS policy mode and tested again.

This prod version was working correctly before updating to v0.19.4. I then unpublished it while working on refining the dev version, then updated to v0.19.4, and then published it again, which is when this CORS error began happening.

Any other suggestions?

UCSBConrad avatar Apr 20 '22 18:04 UCSBConrad