Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Custom request headers cannot be set in BFF mode. #6582

Open
veaba opened this issue Nov 28, 2024 · 4 comments
Open

[Bug]: Custom request headers cannot be set in BFF mode. #6582

veaba opened this issue Nov 28, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@veaba
Copy link

veaba commented Nov 28, 2024 •
edited
Loading

Version

Browsers:
    Edge: Chromium (128.0.2739.67)
    Internet Explorer: 11.0.26100.1
  npmPackages:
    @modern-js/app-tools: 2.62.1 => 2.62.1
    @modern-js/plugin-bff: 2.60.2 => 2.60.2
    @modern-js/plugin-koa: 2.60.2 => 2.60.2
    @modern-js/plugin-tailwindcss: ^2.60.3 => 2.63.0
    @modern-js/runtime: 2.60.2 => 2.60.2
    @modern-js/tsconfig: 2.62.1 => 2.62.1

Details

use http client, visit http://127.0.0.1:8080/index.html :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document client 2</title>

</head>

<body>
  <script>

    const fetchAPIPost = async () => {
      console.log('fetchAPIPost');
      const res = await fetch('http://127.0.0.1:8081/api/hello', {
        method: 'POST',
        mode: 'cors',
       // If I remove the headers field, the cross-domain works, but with it, it doesn't.
        headers: {
          'x1-Content-Type': 'application/json',
        },
        body: JSON.stringify({
          a: 'xx',
        }),
      });

      const resJSON = await res.json();

      console.log('post resJSON=>', resJSON);
    }

    fetchAPIPost()

  </script>
</body>

</html>

server, run http://127.0.0.1:8081/api/hello， on modernjs BFF mode:

import Koa, { Context } from 'koa';
import cors from 'koa2-cors';

const app = new Koa();


app.use(cors({
  origin: '*',
  credentials: true, 
  allowMethods: ['*'],
  allowHeaders: ['*']
}));

app.use(async (ctx: Context, next) => {
  // console.info(`access url: ${ctx.url}`);
  // ctx.set('Access-Control-Allow-Headers', '*');
  await next();
});


export default app;

/api/hello:

import { useContext } from '@modern-js/runtime/koa';
export const get = async () => {
  const ctx = useContext();
  console.log('get header=>', ctx.req.headers);
  return { message: 'hello' };
};

export const post = async (ctx: any) => {
  console.log('post header=>', ctx.headers);
  console.log('post header req=>', ctx.req);
  console.log('post header res=>', ctx.response);
  return { message: 'post' };
};

Image

If I remove the headers field, the cross-domain works, but with it, it doesn't.

Reproduce link

https://modernjs.dev/guides/advanced-features/bff/sdk.html

Reproduce Steps

see detail section.
@veaba veaba added the bug Something isn't working label Nov 28, 2024
@zllkjc
Copy link
Member

zllkjc commented Dec 5, 2024

I think this has nothing to do with EdenX, it's the cross domain policy, maybe you need Access-Control-Allow-Headers

@veaba
Copy link
Author

veaba commented Dec 5, 2024 •
edited
Loading

I'm sure it's due to modern not being able to pass origin.

If you look closely at the code, the cors configuration can't be passed correctly, otherwise there is no explanation for cors not working.

I tried configuring the header to be Sec-* on the client and it works, but it still gets discarded.
Anything else triggers cors directly.

@veaba
Copy link
Author

veaba commented Dec 5, 2024

To add further, server is running in modernjs BFF mode.

The problem I'm having is that in Modernjs BFF mode, cors is configured, but it's not working.

Wait a few minutes and I'll upload an example.

@veaba
Copy link
Author

veaba commented Dec 5, 2024

example: https://github.com/veaba/error-projects-list/tree/main/modern-bff-cors-error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@veaba @zllkjc