Redirect to external URL from express server via GET request from React App



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








0















Suppose I have two servers A and B:
A -> React App server
B -> API Server (in my case Node with Express)
Both of which I have control.



I have CORS enabled on server B, and on development am using proxy in my client app's package.json to query the API server.



Now the problem is when I send a GET request from server A to the API server and ask it to do a redirect to another external URL I get a CORS error in my React App.



But, when I make a GET request to the API server via Postman I am redirected.
I understand that it happens because the react app server is not registered with CORS while the API server is.



And this issue can be mitigated if both the applications are on the same server. Correct me if I am wrong?



Am currently doing a workaround by making a GET request to the API server, getting the redirect URL as a response and doing a redirect on the client side.



Now my question is, whether there is any other possible way in which I don't have to get the redirect url as a response/ put both applications on same server and instead do a redirect straightaway?



I want the request flow to be:

React App [app.com] ----GET----> Api server[api.app.com]) ----REDIRECT----> External URL



My current implementation:



API Snippet



try 
let url = await Urls.findOne( shortCode: shortCode );

if(!url)
// Send 404
return res.status(404).send( status: "NOT_FOUND" );

// Redirect to original URL
//res.redirect(url.longUrl);
return res.status(200).send( status: "FOUND", url: url.longUrl );

catch(error)
console.log(error);
return res.status(500).send( status: "FAILED" );



Client Side



componentDidMount() 
let id = this.props.match.params.id;

axios.get(`/api/$id`)
.then(response =>
window.location.replace(response.data.url);
)
.catch(error =>
this.setState( displayError: true, errorType: error.response.data.status )
);










share|improve this question
























  • It doesn't seem to be possible (see first answer here). Putting app and API on the same origin should work.

    – Johannes Reuter
    Nov 14 '18 at 7:42












  • ok. Any idea on how the url shorteners handle this scenario since my project is of a url shortener.

    – Ayan
    Nov 14 '18 at 7:53











  • If your app is served by nginx, you can proxy the api-traffic to the API server if you put it all under the path 'api'. Like here

    – Johannes Reuter
    Nov 14 '18 at 7:56











  • Currently am proxying requests from localhost:3000 to api server localhost:3001 via proxy in package.json of the react app. Will serving the app by nginx be differently handled? See here

    – Ayan
    Nov 14 '18 at 8:01


















0















Suppose I have two servers A and B:
A -> React App server
B -> API Server (in my case Node with Express)
Both of which I have control.



I have CORS enabled on server B, and on development am using proxy in my client app's package.json to query the API server.



Now the problem is when I send a GET request from server A to the API server and ask it to do a redirect to another external URL I get a CORS error in my React App.



But, when I make a GET request to the API server via Postman I am redirected.
I understand that it happens because the react app server is not registered with CORS while the API server is.



And this issue can be mitigated if both the applications are on the same server. Correct me if I am wrong?



Am currently doing a workaround by making a GET request to the API server, getting the redirect URL as a response and doing a redirect on the client side.



Now my question is, whether there is any other possible way in which I don't have to get the redirect url as a response/ put both applications on same server and instead do a redirect straightaway?



I want the request flow to be:

React App [app.com] ----GET----> Api server[api.app.com]) ----REDIRECT----> External URL



My current implementation:



API Snippet



try 
let url = await Urls.findOne( shortCode: shortCode );

if(!url)
// Send 404
return res.status(404).send( status: "NOT_FOUND" );

// Redirect to original URL
//res.redirect(url.longUrl);
return res.status(200).send( status: "FOUND", url: url.longUrl );

catch(error)
console.log(error);
return res.status(500).send( status: "FAILED" );



Client Side



componentDidMount() 
let id = this.props.match.params.id;

axios.get(`/api/$id`)
.then(response =>
window.location.replace(response.data.url);
)
.catch(error =>
this.setState( displayError: true, errorType: error.response.data.status )
);










share|improve this question
























  • It doesn't seem to be possible (see first answer here). Putting app and API on the same origin should work.

    – Johannes Reuter
    Nov 14 '18 at 7:42












  • ok. Any idea on how the url shorteners handle this scenario since my project is of a url shortener.

    – Ayan
    Nov 14 '18 at 7:53











  • If your app is served by nginx, you can proxy the api-traffic to the API server if you put it all under the path 'api'. Like here

    – Johannes Reuter
    Nov 14 '18 at 7:56











  • Currently am proxying requests from localhost:3000 to api server localhost:3001 via proxy in package.json of the react app. Will serving the app by nginx be differently handled? See here

    – Ayan
    Nov 14 '18 at 8:01














0












0








0








Suppose I have two servers A and B:
A -> React App server
B -> API Server (in my case Node with Express)
Both of which I have control.



I have CORS enabled on server B, and on development am using proxy in my client app's package.json to query the API server.



Now the problem is when I send a GET request from server A to the API server and ask it to do a redirect to another external URL I get a CORS error in my React App.



But, when I make a GET request to the API server via Postman I am redirected.
I understand that it happens because the react app server is not registered with CORS while the API server is.



And this issue can be mitigated if both the applications are on the same server. Correct me if I am wrong?



Am currently doing a workaround by making a GET request to the API server, getting the redirect URL as a response and doing a redirect on the client side.



Now my question is, whether there is any other possible way in which I don't have to get the redirect url as a response/ put both applications on same server and instead do a redirect straightaway?



I want the request flow to be:

React App [app.com] ----GET----> Api server[api.app.com]) ----REDIRECT----> External URL



My current implementation:



API Snippet



try 
let url = await Urls.findOne( shortCode: shortCode );

if(!url)
// Send 404
return res.status(404).send( status: "NOT_FOUND" );

// Redirect to original URL
//res.redirect(url.longUrl);
return res.status(200).send( status: "FOUND", url: url.longUrl );

catch(error)
console.log(error);
return res.status(500).send( status: "FAILED" );



Client Side



componentDidMount() 
let id = this.props.match.params.id;

axios.get(`/api/$id`)
.then(response =>
window.location.replace(response.data.url);
)
.catch(error =>
this.setState( displayError: true, errorType: error.response.data.status )
);










share|improve this question
















Suppose I have two servers A and B:
A -> React App server
B -> API Server (in my case Node with Express)
Both of which I have control.



I have CORS enabled on server B, and on development am using proxy in my client app's package.json to query the API server.



Now the problem is when I send a GET request from server A to the API server and ask it to do a redirect to another external URL I get a CORS error in my React App.



But, when I make a GET request to the API server via Postman I am redirected.
I understand that it happens because the react app server is not registered with CORS while the API server is.



And this issue can be mitigated if both the applications are on the same server. Correct me if I am wrong?



Am currently doing a workaround by making a GET request to the API server, getting the redirect URL as a response and doing a redirect on the client side.



Now my question is, whether there is any other possible way in which I don't have to get the redirect url as a response/ put both applications on same server and instead do a redirect straightaway?



I want the request flow to be:

React App [app.com] ----GET----> Api server[api.app.com]) ----REDIRECT----> External URL



My current implementation:



API Snippet



try 
let url = await Urls.findOne( shortCode: shortCode );

if(!url)
// Send 404
return res.status(404).send( status: "NOT_FOUND" );

// Redirect to original URL
//res.redirect(url.longUrl);
return res.status(200).send( status: "FOUND", url: url.longUrl );

catch(error)
console.log(error);
return res.status(500).send( status: "FAILED" );



Client Side



componentDidMount() 
let id = this.props.match.params.id;

axios.get(`/api/$id`)
.then(response =>
window.location.replace(response.data.url);
)
.catch(error =>
this.setState( displayError: true, errorType: error.response.data.status )
);







node.js reactjs express axios url-redirection






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 6:44







Ayan

















asked Nov 14 '18 at 7:26









AyanAyan

69011130




69011130












  • It doesn't seem to be possible (see first answer here). Putting app and API on the same origin should work.

    – Johannes Reuter
    Nov 14 '18 at 7:42












  • ok. Any idea on how the url shorteners handle this scenario since my project is of a url shortener.

    – Ayan
    Nov 14 '18 at 7:53











  • If your app is served by nginx, you can proxy the api-traffic to the API server if you put it all under the path 'api'. Like here

    – Johannes Reuter
    Nov 14 '18 at 7:56











  • Currently am proxying requests from localhost:3000 to api server localhost:3001 via proxy in package.json of the react app. Will serving the app by nginx be differently handled? See here

    – Ayan
    Nov 14 '18 at 8:01


















  • It doesn't seem to be possible (see first answer here). Putting app and API on the same origin should work.

    – Johannes Reuter
    Nov 14 '18 at 7:42












  • ok. Any idea on how the url shorteners handle this scenario since my project is of a url shortener.

    – Ayan
    Nov 14 '18 at 7:53











  • If your app is served by nginx, you can proxy the api-traffic to the API server if you put it all under the path 'api'. Like here

    – Johannes Reuter
    Nov 14 '18 at 7:56











  • Currently am proxying requests from localhost:3000 to api server localhost:3001 via proxy in package.json of the react app. Will serving the app by nginx be differently handled? See here

    – Ayan
    Nov 14 '18 at 8:01

















It doesn't seem to be possible (see first answer here). Putting app and API on the same origin should work.

– Johannes Reuter
Nov 14 '18 at 7:42






It doesn't seem to be possible (see first answer here). Putting app and API on the same origin should work.

– Johannes Reuter
Nov 14 '18 at 7:42














ok. Any idea on how the url shorteners handle this scenario since my project is of a url shortener.

– Ayan
Nov 14 '18 at 7:53





ok. Any idea on how the url shorteners handle this scenario since my project is of a url shortener.

– Ayan
Nov 14 '18 at 7:53













If your app is served by nginx, you can proxy the api-traffic to the API server if you put it all under the path 'api'. Like here

– Johannes Reuter
Nov 14 '18 at 7:56





If your app is served by nginx, you can proxy the api-traffic to the API server if you put it all under the path 'api'. Like here

– Johannes Reuter
Nov 14 '18 at 7:56













Currently am proxying requests from localhost:3000 to api server localhost:3001 via proxy in package.json of the react app. Will serving the app by nginx be differently handled? See here

– Ayan
Nov 14 '18 at 8:01






Currently am proxying requests from localhost:3000 to api server localhost:3001 via proxy in package.json of the react app. Will serving the app by nginx be differently handled? See here

– Ayan
Nov 14 '18 at 8:01













2 Answers
2






active

oldest

votes


















0














You can use res.redirect(301, 'http://example.com'); for redirect to external URL in express and in terms of CORS i think you should not get that error in react app because you are doing a server redirect and CORS errors occurs when you are trying to hit an server API from the front end URL and that has not been added to CORS or you can set you CORS headers in your server as * or set specific URL that you want to give access to. If you are getting CORS error in redirect from server API response then you are probably doing something not right.






share|improve this answer























  • I tried using 301, 302 but redirect is not happening. I have enabled CORS using the cors module. Redirect happens when I hit the server API with postman but not from react app

    – Ayan
    Nov 14 '18 at 8:22


















0














Are you sure response.data.url is valid url or undefined? Try console.log(response.data.url) to confirm.
If is undefined replace res.send() from server with res.json()






share|improve this answer























  • It's a valid url. Confirmed and tested.

    – Ayan
    Nov 14 '18 at 13:58











  • For development, my react app runs on localhost:3000 and node app on localhost:3001

    – Ayan
    Nov 14 '18 at 14:00












Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295043%2fredirect-to-external-url-from-express-server-via-get-request-from-react-app%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














You can use res.redirect(301, 'http://example.com'); for redirect to external URL in express and in terms of CORS i think you should not get that error in react app because you are doing a server redirect and CORS errors occurs when you are trying to hit an server API from the front end URL and that has not been added to CORS or you can set you CORS headers in your server as * or set specific URL that you want to give access to. If you are getting CORS error in redirect from server API response then you are probably doing something not right.






share|improve this answer























  • I tried using 301, 302 but redirect is not happening. I have enabled CORS using the cors module. Redirect happens when I hit the server API with postman but not from react app

    – Ayan
    Nov 14 '18 at 8:22















0














You can use res.redirect(301, 'http://example.com'); for redirect to external URL in express and in terms of CORS i think you should not get that error in react app because you are doing a server redirect and CORS errors occurs when you are trying to hit an server API from the front end URL and that has not been added to CORS or you can set you CORS headers in your server as * or set specific URL that you want to give access to. If you are getting CORS error in redirect from server API response then you are probably doing something not right.






share|improve this answer























  • I tried using 301, 302 but redirect is not happening. I have enabled CORS using the cors module. Redirect happens when I hit the server API with postman but not from react app

    – Ayan
    Nov 14 '18 at 8:22













0












0








0







You can use res.redirect(301, 'http://example.com'); for redirect to external URL in express and in terms of CORS i think you should not get that error in react app because you are doing a server redirect and CORS errors occurs when you are trying to hit an server API from the front end URL and that has not been added to CORS or you can set you CORS headers in your server as * or set specific URL that you want to give access to. If you are getting CORS error in redirect from server API response then you are probably doing something not right.






share|improve this answer













You can use res.redirect(301, 'http://example.com'); for redirect to external URL in express and in terms of CORS i think you should not get that error in react app because you are doing a server redirect and CORS errors occurs when you are trying to hit an server API from the front end URL and that has not been added to CORS or you can set you CORS headers in your server as * or set specific URL that you want to give access to. If you are getting CORS error in redirect from server API response then you are probably doing something not right.







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 14 '18 at 8:15









nitinhitman47nitinhitman47

11




11












  • I tried using 301, 302 but redirect is not happening. I have enabled CORS using the cors module. Redirect happens when I hit the server API with postman but not from react app

    – Ayan
    Nov 14 '18 at 8:22

















  • I tried using 301, 302 but redirect is not happening. I have enabled CORS using the cors module. Redirect happens when I hit the server API with postman but not from react app

    – Ayan
    Nov 14 '18 at 8:22
















I tried using 301, 302 but redirect is not happening. I have enabled CORS using the cors module. Redirect happens when I hit the server API with postman but not from react app

– Ayan
Nov 14 '18 at 8:22





I tried using 301, 302 but redirect is not happening. I have enabled CORS using the cors module. Redirect happens when I hit the server API with postman but not from react app

– Ayan
Nov 14 '18 at 8:22













0














Are you sure response.data.url is valid url or undefined? Try console.log(response.data.url) to confirm.
If is undefined replace res.send() from server with res.json()






share|improve this answer























  • It's a valid url. Confirmed and tested.

    – Ayan
    Nov 14 '18 at 13:58











  • For development, my react app runs on localhost:3000 and node app on localhost:3001

    – Ayan
    Nov 14 '18 at 14:00
















0














Are you sure response.data.url is valid url or undefined? Try console.log(response.data.url) to confirm.
If is undefined replace res.send() from server with res.json()






share|improve this answer























  • It's a valid url. Confirmed and tested.

    – Ayan
    Nov 14 '18 at 13:58











  • For development, my react app runs on localhost:3000 and node app on localhost:3001

    – Ayan
    Nov 14 '18 at 14:00














0












0








0







Are you sure response.data.url is valid url or undefined? Try console.log(response.data.url) to confirm.
If is undefined replace res.send() from server with res.json()






share|improve this answer













Are you sure response.data.url is valid url or undefined? Try console.log(response.data.url) to confirm.
If is undefined replace res.send() from server with res.json()







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 14 '18 at 13:55









KibGzrKibGzr

1,506611




1,506611












  • It's a valid url. Confirmed and tested.

    – Ayan
    Nov 14 '18 at 13:58











  • For development, my react app runs on localhost:3000 and node app on localhost:3001

    – Ayan
    Nov 14 '18 at 14:00


















  • It's a valid url. Confirmed and tested.

    – Ayan
    Nov 14 '18 at 13:58











  • For development, my react app runs on localhost:3000 and node app on localhost:3001

    – Ayan
    Nov 14 '18 at 14:00

















It's a valid url. Confirmed and tested.

– Ayan
Nov 14 '18 at 13:58





It's a valid url. Confirmed and tested.

– Ayan
Nov 14 '18 at 13:58













For development, my react app runs on localhost:3000 and node app on localhost:3001

– Ayan
Nov 14 '18 at 14:00






For development, my react app runs on localhost:3000 and node app on localhost:3001

– Ayan
Nov 14 '18 at 14:00


















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295043%2fredirect-to-external-url-from-express-server-via-get-request-from-react-app%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

Edmonton

Crossroads (UK TV series)