How can I get URL from Node.js to React.js?

Question

Currently, I'm trying to fetch data from node.js to react.js. And I'm using useEffect to get the data from node.js but for some reason, I can not get the URL from node js. I'm really new to node.js with react.js So I want to know what is a proper way to fetch the data. This is my code:

Server

const app = express();

var client_id =
  "???????????????????????????????????????";
var client_secret =
  "???????????????????????????????????????";
var state_val = "RANDOM_STATE";
var redirectURI = "http://localhost:5000/callback";


app.get("/", function (req, res) {
  let api_url =
    "https://www.?????.co.kr/oauth2.0/authorize?response_type=code&client_id=" +
    client_id +
    "&redirect_uri=" +
    redirectURI +
    "&state=" +
    state_val;
  res.send("<a href='" + api_url + "'>로그인</a>");
});

Client

  const [d, setd] = useState();
  useEffect(() => {
    fetch("http://localhost:5000/")
      .then(res => {
        return res.send();
      })
      .then(data => {
        console.log(data);
        setd(data);
      });
  }, []);
  console.log(d);

And when I access this, I got an error like this:

but when I change the fetch Url like "http://localhost:5000/callback" then it doesn't get the error

morganney · Accepted Answer · 2021-09-27 02:10:08Z

3

You are making a cross origin fetch request and so your server needs to respond with the correct Access-Control-* headers. In this case you need Access-Control-Allow-Origin.

You can use the cors package.

import cors from 'cors'

const app = express();

var client_id =
  "???????????????????????????????????????";
var client_secret =
  "???????????????????????????????????????";
var state_val = "RANDOM_STATE";
var redirectURI = "http://localhost:5000/callback";

app.use(cors())

app.get("/", function (req, res) {
  let api_url =
    "https://www.?????.co.kr/oauth2.0/authorize?response_type=code&client_id=" +
    client_id +
    "&redirect_uri=" +
    redirectURI +
    "&state=" +
    state_val;
  res.send("<a href='" + api_url + "'>로그인</a>");
});

answered Sep 27, 2021 at 2:10

morganney

13.8k1 gold badge33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abbasihsn · Accepted Answer · 2021-09-27 02:09:14Z

2

If you have set everything right, it seems related to the CORS problem. try adding the below middleware to your code:

// Add headers before the routes are defined
app.use(function (req, res, next) {

    // this is related to websites you want to allow them to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

    // you can limit the API methods accordingly
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // choose the headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');


    // Pass to next level
    next();
});

answered Sep 27, 2021 at 2:09

Abbasihsn

2,1811 gold badge10 silver badges17 bronze badges

Comments

sai manoj · Accepted Answer · 2021-09-27 02:16:08Z

1

Just curious to know is there any specific reason why you are running node js and react js in separate ports.

answered Sep 27, 2021 at 2:16

sai manoj

723 bronze badges

1 Comment

Abbasihsn Over a year ago

Try to ask your question in a new post, but it is due to the fact that we need two-port to access the frontend and backend at the same time. It is impossible to have a same port for both because we need to have access to them seperately

Collectives™ on Stack Overflow

How can I get URL from Node.js to React.js?

Server

Client

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Server

Client

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related