5

I am making simple twitter login using passport js, but when calling twitter route, I get CORS error.

server.js

const express = require("express");
const session = require("express-session");
const dotenv = require("dotenv");
const userLoginRoutes = require("./routes/userLoginRoute");
const cors = require("cors");
const app = express();

app.use(cors());
app.use(function (req, res, next) {
  res.header(
    "Access-Control-Allow-Origin",
    "*"
  ); // update to match the domain you will make the request from
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});
app.get("/api/auth/twitter", passport.authenticate("twitter"));

action dispatching here

import {
  USER__LOGIN,
  USER__LOGIN__FAILURE,
  USER__LOGIN__SUCCESS,
} from "../constants/loginconstants";

const axios = require("axios");

// login action
export const userLoginAction = () => async (dispatch) => {
  try {
    dispatch({
      type: USER__LOGIN,
    });
    const config = {
      header: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin" : "*"
      },
    };
    const { data } = await axios.get(`/api/auth/twitter`, config);
    dispatch({
      type: USER__LOGIN__SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: USER__LOGIN__FAILURE,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

in package.json in client,

  "proxy": "http://127.0.0.1:3001",

Also I cannot see Access-Control-Allow-Origin in the network tab, see here, enter image description here

Is there anything wrong while setting the Access-Control-Allow-Origin?

I cannot figure out, where am I getting wrong. I have used cors, and even manually set the origin to *.

Cors error that i am getting, cors error

Aman Chaudhary
  • 802
  • 3
  • 10
  • 27
  • Watch the request in the browser dev tools Network tab (Chrome F12 to open). Look at the response and check if your `Access-Control-Allow-Origin` is present. Share the full CORS error. – MrCode Jul 19 '22 at 13:35
  • I have added the screenshot @MrCode – Aman Chaudhary Jul 19 '22 at 13:37
  • @MrCode I cannot see the `Access-Control-Allow-Origin`, is there anything wrong in setting the origin? – Aman Chaudhary Jul 19 '22 at 13:48
  • 1
    This appears to be due to incorrect usage of the Twitter api rather than a CORS issue. You're doing an ajax request to local `/api/auth/twitter` which is redirecting to `api.twitter.com`. This request should be a regular browser redirect of the full page, not ajax, as seen in [this guide](https://medium.com/free-code-camp/how-to-set-up-twitter-oauth-using-passport-js-and-reactjs-9ffa6f49ef0). That's why you get a CORS error - because you're not supposed to ajax this Twitter url. – MrCode Jul 19 '22 at 13:53
  • The CORS error seems to be produced from twitter's API not your express server. Are you sure you have implemented the auth flow correctly? I think you may want to redirect the user and then have a callback endpoint on your API that will consume the data after they have signed in. – zemaj Jul 19 '22 at 13:53
  • Does this answer your question? [CORS error even after setting Access-Control-Allow-Origin or other Access-Control-Allow-\* headers on client side](https://stackoverflow.com/questions/44232370/cors-error-even-after-setting-access-control-allow-origin-or-other-access-contro) – jub0bs Jul 19 '22 at 13:57

0 Answers0