Very new to react so bear with me. I have got a webapi that on its GET it returns a redirect response, I believe the http code is 301.
How do I in React make my browser redirect to the webpage that coming from my api using fetch after a buttonclick?
I thought it would be as simple as just getting a fetch and not doing anything with it, but clearly nothing is happening
handleSubmit(event){
event.preventDefault();
fetch("https://localhost:44323/Redirection")
}
Related
We created a react js application.
Problem: Not able to hit react URL from the postman to run component's function.
local URL: http://localhost:3000/rules/routine
Note: Above URL can be reached without login.
When we are calling a url from browser it's working however when we hit from a postman then it always returns public/index.html page but not the expected response.
So it is not calling the proper url http://localhost:3000/rules/routine.
Please find attached screenshots on below links
browser hit: https://prnt.sc/73gDWh4PiHgu
Postman hit: https://prnt.sc/fhVL78yaiATP
It's technically possible, and working it seems, but I suspect your expectations are a little skewed in what you think Postman will do or is capable of.
Keep in mind that all React apps are effectively a single page app, even when they use a routing/navigation package like react-router. react-router is only manipulating the URL in the address bar in the browser window, the app is still running from the single location on a server where it's hosted, i.e. public/index.html.
The servers hosting the app are configured to route all page requests, i.e. "http://localhost:3000/rules/routine" to the root index file, i.e. "http://localhost:3000/index.html" so the React app is loaded and can handle the "/rules/routine" internally.
So from what I see here, the response from Postman is absolutely correct and what I'd expect to see. It made a request to the development server for a nested directory "/rules/routing" and the server responded with the root index.html file. When the browser makes this request to the development server and gets a HTML file back it loads and renders it, and in this case, it's your React app.
Postman isn't a browser so it's not going to load the HTML response and do anything with it.
I took over a separate front-end and back-end website, consisting of two back-ends, Ruby on Rails and React. Prior to this, I have always used the MVC framework to make websites, but now the "V" part has become a React repo independently.
Specifically, I have to write a render json: #variable in a Controller#Action, but after this I don't know where the json is transmitted to the front end (React repo)? I don't know how to find the API endpoint.
I heard that this is related to React route? What's this? Where is this written?
The problem is very big, please let me know if you have any recommended teaching articles.
If you are making Rails as backend and React as frontend you need to call Rails API from React. You need to return json from Rails method, you can declare format also in method so if format type is json return as json else return html.You can check confi/routes to know path for method.
To check if rails API call is working and how data is getting return you can use postman. Once tested in postman same api with http method (get,put, post etc) and parameter can be passed as API in React.
example
Blockquote
loadTdlists() {
axios
.get("users/user_list.json")
.then((res) => {
this.setState({ tdlists: res.data });
})
.catch((error) => console.log(error));
}
Blockquote
here user_list method is define in users controller. you can use full URL also when calling api according to project requirement.
I'm a beginner in rails, I started project rails api + react.native on front. Where I find my endpoints to frontend was in one command.
rails routes
which show us some data like:
new_api_user_session GET /api/v1/auth/sign_in(.:format) devise_token_auth/sessions#new
api_user_session POST /api/v1/auth/sign_in(.:format) devise_token_auth/sessions#create
destroy_api_user_session DELETE /api/v1/auth/sign_out(.:format) devise_token_auth/sessions#destroy
new_api_user_password GET /api/v1/auth/password/new(.:format) devise_token_auth/passwords#new
edit_api_user_password GET /api/v1/auth/password/edit(.:format) devise_token_auth/passwords#edit
api_user_password PATCH /api/v1/auth/password(.:format) devise_token_auth/passwords#update
PUT /api/v1/auth/password(.:format) devise_token_auth/passwords#update
POST /api/v1/auth/password(.:format) devise_token_auth/passwords#create
cancel_api_user_registration GET /api/v1/auth/cancel(.:format) devise_token_auth/registrations#cancel
new_api_user_registration GET /api/v1/auth/sign_up(.:format) devise_token_auth/registrations#new
edit_api_user_registration GET /api/v1/auth/edit(.:format) devise_token_auth/registrations#edit
api_user_registration PATCH /api/v1/auth(.:format) devise_token_auth/registrations#update
PUT /api/v1/auth(.:format) devise_token_auth/registrations#update
DELETE /api/v1/auth(.:format) devise_token_auth/registrations#destroy
POST /api/v1/auth(.:format) devise_token_auth/registrations#create
new_api_user_confirmation GET /api/v1/auth/confirmation/new(.:format) devise_token_auth/confirmations#new
api_user_confirmation GET /api/v1/auth/confirmation(.:format) devise_token_auth/confirmations#show
POST /api/v1/auth/confirmation(.:format) devise_token_auth/confirmations#create
api_v1_auth_validate_token GET /api/v1/auth/validate_token(.:format) devise_token_auth/token_validations#validate_token
for example /api/v1/auth/sign_in is endpoint to register a user. I gave it to frontend developer and works well. If you want to test your endpoints you can use program like Insomnia or Postman with json data in it.
I have created a webpage using ReactJS. When I called my web URL in postman using the GET method, I got my HTML page as a response. But when I changed this method to POST, then got an error(404 Not Found). Can I make my URL available in the POST method too? Is this possible?
I am facing a issue in routing.
the issue is when i hit the url - http://localhost:3000/extInsurance/16/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySUQiOiIzIiwiUm9sZUlEIjoiOCIsIlVzZXJOYW1lIjoiYWxpY2lhaGludG9uQHlvcG1haWwuY29tIiwiQ2xpbmljSUQiOiIxMjg5IiwiVXNlclR5cGUiOiJTVEFGRiIsIlN0YWZmSUQiOiIyIiwiUm9sZU5hbWUiOiJET0NUT1IiLCJCdXNpbmVzc1Rva2VuIjoiYmxvb2QwMDEiLCJPcmdJRCI6IjEzNTYiLCJCYXNlUm9sZUlEIjoiOCIsIkJhc2VVc2VyVHlwZSI6IlNUQUZ
this url get hits properly and i get the response. meaning i get redirect to correct page.
but when i push this on testing server then i am getting bad request with same url
also when i reduce the path then again it get hit properly on my testing server.
It's bad idea to use token as a part of URL path.
It's recommended to pass token as a optional URL parameter. Something like this,
http://localhost:3000/some-path?token=eyJhb...
I've got a bit of a strange issue with iOS safari and backbone.js.
I am trying to fetch a collection via a post command, my backbone code is
MyApp.search_results.fetch({data: data,type: 'POST',
success: function(response){
//I do a bunch of stuff with success
},
error: function(){
alert('problem getting search');
}
});
when I run the above code in chrome (both desktop and in iPhone or Android) I get the result no problem.
But using safari on iOS, I get Failed to load resource: the server responded with a status of 404 (Not Found).
The big problem is my rails console does not even show that safari is sending the request, I see nothing past the previous request, so I'm getting a 404 error, but that actually isn't the problem.
Any ideas?
------------------------ update -----------------------
the problem is somehow caused by the type: 'POST'. I have removed and am now submitting a get request, but I would prefer this being a post type. So any suggestions on how to fix that would be great.
Backbone internally set's the request method to GET for the fetch function. Trying to override it can cause any number of inconsistencies and is not recommended.
If you're trying to fetch data, then why not update your server code to read the GET params instead of POST params (or both)?