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;
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
add a comment |
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
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 fromlocalhost:3000
to api serverlocalhost: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
add a comment |
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
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
node.js reactjs express axios url-redirection
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 fromlocalhost:3000
to api serverlocalhost: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
add a comment |
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 fromlocalhost:3000
to api serverlocalhost: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
add a comment |
2 Answers
2
active
oldest
votes
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.
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
add a comment |
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()
It's a valid url. Confirmed and tested.
– Ayan
Nov 14 '18 at 13:58
For development, my react app runs onlocalhost:3000
and node app onlocalhost:3001
– Ayan
Nov 14 '18 at 14:00
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
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()
It's a valid url. Confirmed and tested.
– Ayan
Nov 14 '18 at 13:58
For development, my react app runs onlocalhost:3000
and node app onlocalhost:3001
– Ayan
Nov 14 '18 at 14:00
add a comment |
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()
It's a valid url. Confirmed and tested.
– Ayan
Nov 14 '18 at 13:58
For development, my react app runs onlocalhost:3000
and node app onlocalhost:3001
– Ayan
Nov 14 '18 at 14:00
add a comment |
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()
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()
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 onlocalhost:3000
and node app onlocalhost:3001
– Ayan
Nov 14 '18 at 14:00
add a comment |
It's a valid url. Confirmed and tested.
– Ayan
Nov 14 '18 at 13:58
For development, my react app runs onlocalhost:3000
and node app onlocalhost: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
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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 serverlocalhost: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