CORS issue for our app - Githubissues

Frankjunyulin commented 1 year ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React, Next.js

Amplify APIs

REST API

Amplify Categories

function, api

Environment information

``` System: OS: macOS 12.6 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 27.67 MB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.13.0/bin/yarn npm: 9.5.0 - ~/.nvm/versions/node/v16.13.0/bin/npm Watchman: 2023.04.10.00 - /usr/local/bin/watchman Browsers: Chrome: 112.0.5615.137 Safari: 16.0 npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/core: ^5.0.15 => 5.0.15 @aws-amplify/ui-react: ^4.3.8 => 4.3.8 @aws-amplify/ui-react-internal: undefined () @babel/core: undefined () @babel/runtime: 7.15.4 @edge-runtime/primitives: 1.1.0-beta.31 @emotion/react: ^11.10.5 => 11.10.6 @emotion/styled: ^11.10.5 => 11.10.6 @hapi/accept: undefined () @headlessui/react: ^1.7.3 => 1.7.11 @heroicons/react: ^2.0.12 => 2.0.16 @mui/material: ^5.10.16 => 5.11.10 @napi-rs/triples: undefined () @next/react-dev-overlay: undefined () @prisma/client: ^4.12.0 => 4.12.0 @segment/ajv-human-errors: undefined () @types/node: 18.8.2 => 18.8.2 @types/react: ^18.0.21 => 18.0.28 @types/react-dom: ^18.0.6 => 18.0.11 @vercel/nft: undefined () acorn: undefined () amphtml-validator: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () autoprefixer: ^10.4.12 => 10.4.13 aws-amplify: ^5.0.15 => 5.0.15 axios: ^1.3.5 => 1.3.5 (0.26.0, 0.26.1) babel-packages: undefined () browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () chalk: undefined () ci-info: undefined () cli-select: undefined () comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () cross-spawn: undefined () crypto-browserify: undefined () cssnano-simple: undefined () debug: undefined () devalue: undefined () domain-browser: undefined () edge-runtime: undefined () eslint: 8.24.0 => 8.24.0 eslint-config-next: 12.3.1 => 12.3.1 events: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () get-orientation: undefined () glob: undefined () gzip-size: undefined () html-to-text: ^9.0.5 => 9.0.5 http-proxy: undefined () https-browserify: undefined () icss-utils: undefined () ignore-loader: undefined () image-size: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () jest-worker: undefined () json5: undefined () jsonwebtoken: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () micromatch: undefined () mini-css-extract-plugin: undefined () nanoid: undefined () native-url: undefined () neo-async: undefined () next: ^12.3.1 => 12.3.4 node-fetch: undefined () node-html-parser: undefined () openai: ^3.1.0 => 3.2.1 ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () postcss: ^8.4.17 => 8.4.21 (8.4.14) postcss-flexbugs-fixes: undefined () postcss-modules-extract-imports: undefined () postcss-modules-local-by-default: undefined () postcss-modules-scope: undefined () postcss-modules-values: undefined () postcss-preset-env: undefined () postcss-safe-parser: undefined () postcss-scss: undefined () postcss-value-parser: undefined () prisma: ^4.12.0 => 4.12.0 process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: ^18.2.0 => 18.2.0 react-code-blocks: ^0.0.9-0 => 0.0.9-0 react-dom: ^18.2.0 => 18.2.0 react-is: 17.0.2 react-refresh: 0.12.0 react-server-dom-webpack: undefined () react-spinners: ^0.13.8 => 0.13.8 reactflow: ^11.0.0 => 11.5.6 regenerator-runtime: 0.13.4 request: ^2.88.2 => 2.88.2 sass-loader: undefined () schema-utils: undefined () semver: undefined () send: undefined () setimmediate: undefined () source-map: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () superagent: ^8.0.9 => 8.0.9 tailwindcss: ^3.1.8 => 3.2.7 tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tty-browserify: undefined () typescript: 4.8.4 => 4.8.4 ua-parser-js: undefined () unistore: undefined () util: undefined () vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () ws: undefined () npmGlobalPackages: @aws-amplify/cli: 10.7.3 corepack: 0.10.0 node-prune: 1.0.2 npm: 9.5.0 pnpm: 7.13.4 prisma: 4.11.0 serverless: 3.28.0 yarn: 1.22.19 ```

Describe the bug

We keep getting the CORS issue for our app, please see our screenshot:

Expected behavior

There is no CORS error, our app work properly.

Reproduction steps

Go to this page: https://www.dearai.online/TestWidgetOnly
Click bottom right corner icon.
Input any message in the chat widget.
Click "Send"

Then you will see the CORS issue in the console

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

CORS_enable_screenshot

iartemiev commented 1 year ago

Hi, @Frankjunyulin - try appending Access-Control-Allow-Headers,Access-Control-Allow-Origin to the current value in the Access-Control-Allow-Headers field and then deploy the change. Let us know if that helps.

HaihaoLi93 commented 1 year ago

Hi @iartemiev , I appended those two values to Access-Control-Allow-Headers with action Deploy API but still failed. Do I need to add them to the index.js under my amplify api or there is anything else that I can check?

HaihaoLi93 commented 1 year ago

The error message was slightly different

HaihaoLi93 commented 1 year ago

More information:

Origin: http://localhost:3000 had the same issue.
Postman can access with POST and json data.
If I put the access controll header on client side, it will get the old error. (I believe this is incorrect)

HaihaoLi93 commented 1 year ago

Preflight OPTIONrequest and response looks fine with the access control: 38d87a3200f7a55dacfc1d40ff88e31 a1cf778f0f6b59f4251fef8c48a140e However, the POST response doesn't have the access control: 0856bc1f6914d9e4631f70d3a7bc2e2 f00f04b628a541b2dcb365328ae58bf Please check, thanks!