0

everything works fine if i type the url with http://localhost:8000/auth/twitch, I got redirected.

app.get("/auth/twitch", passport.authenticate("twitch"), (req, res) => {
  console.log("mdr")
});
app.get("/auth/twitch/callback", passport.authenticate("twitch"), (req, res) => {
  const { id, email, display_name, created_at, login, profile_image_url } = req.user;
  const date = new Date(created_at);
  return res.redirect(`http://localhost:3000/success?id=${id}&email=${email}&pseudo=${display_name}&channel=${login}&date=${date.toLocaleDateString("fr")}&avatar=${profile_image_url}}`);
});

But if make a call from the frontend reactjs with this

axios.get(`http://localhost:8000/auth/twitch`);

I got this message :

Access to XMLHttpRequest at 'https://www.twitch.tv/login?client_id=*******&redirect_params=client_id%3Dl558bbzlgzb5n41ggxc4901xhkhv5g%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A8000%252Fauth%252Ftwitch%252Fcallback%26response_type%3Dcode%26scope%3Duser_read' (redirected from 'http://localhost:8000/auth/twitch') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've set cors this way in the back end :

app.use(cors({
    origin: "*",
    methods: "GET, POST, DELETE, PUT",
    credentials: true,
}));

But it doesn't change anything.

What am I missing?

Thanks

Jim
  • 669
  • 4
  • 10
  • 24
  • See https://stackoverflow.com/questions/69494027/access-control-allow-origin-equals-origin-but-the-browser-still-denies-access/69497937#69497937 – jub0bs Apr 27 '22 at 13:33
  • I don't get the point ? – Jim Apr 27 '22 at 13:44
  • The point is that, even though your server may be well configured for CORS, if the response redirects to another origin (`https://www.twitch.tv`, in this case), the browser will initiate a whole new CORS check for that origin. And the CORS configuration of `https://www.twitch.tv` likely isn't allowing the `null` origin. – jub0bs Apr 27 '22 at 15:24
  • I got this, and what can I do to avoid this ? – Jim Apr 27 '22 at 16:00
  • did you ever figure it out? – plutownium Dec 15 '22 at 04:26

1 Answers1

0

I found a solution:

[Passportjs][Angular5] No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

<a href="http://localhost:3000/login/google">Google</a>

Where "localhost:3000/login/google" goes to app.get('/login/google', passport.authenticate('google', { scope: ['profile','email']}) );

So instead of using fetch or axios, you use the href to redirect to the backend, then the backend req comes back and says "go here" and it works

plutownium
  • 1,220
  • 2
  • 9
  • 23