We Keep Coding

Flask redirect not happening in browser when trigger by JS callback function

I have a flask app with a button's onClick callback that is handled by javascript. The JS function calls an endpoint of the flask app (after collecting all the necessary data for the request from DOM elements) - it's not tied to a form. Within the flask endpoint, it redirects to another page. Looking in network tab, the request to flask_endpoint does not return a response because of the redirection. Response of request says Failed to load response data: No content available because the request was redirected. However, in the network tab, a separate request of the redirected route is created and the template is in the response of this request. But, it does not redirect the actual browser route to that response. Can someone explain why?
Javascript:
$('#add-button').click(callback)
async function callback(e) {
await axios.post(`/some_flask_endpoint`, {
...request_body...
});
}
Flask endpoint:
#app.route('/some_flask_endpoint', methods=["GET", "POST"])
def save_something():
# some logic...
return redirect('redirect_to_some_url')

It is obvious that you are requesting on an endpoint "/some_flask_endpoint" but you redirect the request to 'redirect_to_some_url'.
JS you show does not appear to redirect the browser to the new endpoint.
Back to your "questions",
if you are questioning the Fail to load, it just tells you that the endpoint does not have any actual responses because it is a redirect.
If you are questioning about nothing happened in the browser after the redirect, it is because the js has responsibility on how to handle the response. If you do not redirect the browser, the browser stays.

CORS issue while trying to redirect from POST method to frontend page with GET request

I would like to redirect from POST method to frontend page with HTTP status code 303.
Expected result is that browser after making POST request redirects to page specified in Location header.
Currently I am getting CORS failed error message and browser does not redirect to frontend page.

A redirect does not mean "Load this URL in the browser window". It means "You can get whatever you asked for here".
When you make an Ajax request using JavaScript, the response is provided to JavaScript.
If the response is a redirect, then the browser follows it automatically and provides the response to the redirect to JavaScript.
The URL you redirect to needs permission from CORS in order for the JavaScript to read the response.
Do not attempt to mix web services and regular page navigation
If you want to submit some data and load a new page: Use a form submission.
If you want to submit some data and handle the response with JS: Use Ajax.

axios.post Fails in App, Works in URL

I'm following a React-Redux tutorial. My axios.post() is failing when running the app, but if I use that same URL and paste it into the browser's address textbox it works. Why would that happen?
Here is the call in my app:
const request = axios.post(`${ROOT_URL}/posts/${id}${API_KEY}`);
Here is the error, as shown in F12 in Chrome:
POST http://reduxblog.herokuapp.com/api/posts/120342?key=bob884 404
(Not Found)
Why would that fail when it's a good URL? If you click it, you'll see the response in the browser:
{"id":120342,"title":"SOLID","categories":"OOP","content":"SOLID is an
acronym..."}

When you click the link, the browser sends a GET request to the server.
A POST endpoint might not be available from the server side at that specific URL address.
Whenever the server is unable to find a URL with a specified method (GET / POST), it returns a 404 - Not found error. In this case, it doesn't find any POST method defined for that address.
You should consider changing the method to a GET request, if that's what you desire.

How to add request headers to window.open in javascript?

In my application I need to open a pdf in a new window. I'm making a window.open call for that. Mine is an MVC application. The url for the window.open contains my controller name and action method so that it will hit the respective action method.
But due to some reason, when I run with http request, I'm able to open the pdf, which means my controller call returns 200. But in the case of https, my controller throws a 302. Is there any solution for this?
One more thing which I found out is, when I compose the https request in Fiddler by adding some request headers to it, my controller returns 200. But I'm not able to add the request headers in window.open. Is there any way to do this?
I cannot go for a server side coding here. I have to complete it in the js itself.

Accept server only GET request

I'm making an GET request to my server with AJAX+JS. I'm using it to delete file like this:
delete.php?file_id=0123456789&user=555555
When I send GET request delete.php will delte file with ID 0123456789, but is there a way to accept only request that server makes to itself.
For example if user opens new tab and types www.mysite.com/delete.php?file_id=0123456789 server will decline that request, but if I call it with JS function server will accept the request.

How about using X-XSRF-TOKEN
in combination with Angular JS?
This will require your webapplication to generate and check this token, but your AJAX request will be authenticated.