flask_cors | Simple Flask response processor to make server support | HTTP library

As in the comment mentioned the solution is via a return redirect(url_with_sas) so the whole function looks like this:

I see an issue; "/new-batch" endpoint is throwing 500 exceptions, which could be related to "Object of type function is not JSON serializable".

Based on the description / Error "No Access-Control-Allow-Origin header is present on the requested resource" message what I understand is

1. CORS configuration has been missed for PUT VERB. Because you wrote that rest of the endpoints work without issues, only PUT on this specific "/new-batch" endpoint fails.

Options: In CORS, a preflight request is sent with the OPTIONS method so that the server can respond if it is acceptable to send the request.

URL: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

If you want to import other files in the same directory in a __init__.py file, you need to use relative import syntax:

The Flask SocketIO documentation says this:

If an incoming HTTP or WebSocket request includes the Origin header, this header must match the scheme and host of the connection URL. In case of a mismatch, a 400 status code response is returned and the connection is rejected.

and this:

If necessary, the cors_allowed_origins option can be used to allow other origins. This argument can be set to a string to set a single allowed origin, or to a list to allow multiple origins. A special value of '*' can be used to instruct the server to allow all origins, but this should be done with care, as this could make the server vulnerable to Cross-Site Request Forgery (CSRF) attacks.

So instead of this:

Your csrf function in frontend is asynchronous, you need to wait until it finished before making this.sanity(); in the created function. You can use async/await

I think the issue is with how you are using file = request.files['mp3'].filename.

The value assigned to file isn't a pointer to the uploaded file. It is just the name of the file, a string. Just request.files['mp3'] is an instance of the werkzeug.datastructures.FileStorage class documented here.

The libraries you are passing that string to are interpreting it as a path to the file they are supposed to open.

Since you haven't saved the file anywhere they library isn't finding anything.

I'm not familiar with the libraries you are using, but they might have a way to send the in-memory file data to them directly without having to save the file then have them open it up again.

If not, then you will probably want to save the file to some temporary location and then have the library open and read the file.

Since I haven't noticed you're already using Flask-CORS I'm updating this answer with some further investigations.

I've fired up a testing environment and managed to make this cross-origin request work properly without changing your code. During this process, I came up with the following possible reasons for your issue:

1. Be sure to request an existing tunnel endpoint. Fetching closed NGROK tunnel endpoints result in CORS error, it does not raise a 404. To be sure I'm requesting the correct tunnel I wrote an index view route that just returns success. I also used this endpoint to ensure the CORS was properly set for all HTTP methods (GET, POST...);
2. Be sure to import logging, Flask can lazy evaluate apps and raise exceptions only in request time. Check out your console for tracebacks;
3. In Flask, if an exception occurs during a request, the request handling flow is aborted and Flask-CORS will never be called to add it's headers in the response object, and your browser will always complain about 'Access-Control-Allow-Origin'. That's why you should always check your browser's 'Response Tab', it may contain a traceback or some other useful information;
4. Check for some info in NGROK introspect accessing http://localhost:4040/, it may help you track many issues;
5. I faced some issues running flask-ngrok provided through pip. I've downloaded its source code from GitHub and imported it into my demo app. Frankly, I would ditch this extension and just run $ ngrok http 5000 in another console;
6. Be sure to set FLASK_DEBUG=true or it may hide some info/tracebacks from you.

Check this Gist for the source code I've used and some evidence: https://gist.github.com/magnunleno/8dad91f133a22322250d6cb609792597

If you find any new info or traceback, please let me know so we can work out a solution.

That happens when you run your server under a specific domain (in your case e20e2287e2cb.ngrok.io) but your web client runs in a different domain (suppose www.abcabc.com) and they try to communicate. You should really take a look at this.

This behavior can be configured by managing your app headers Access-Control-* and, luckily, there is a nice extension that does that for you called Flask-CORS.

Your Dockerfile doesn't appear to be starting your flask api. Try adding a CMD to the end.

I followed this document and I can get what I want. The most importance thing is that the command does not copy the generated files into the pyhton 3.9.4 folder automatically. You have to copy them manually.

1) first download the project under this link and then unpack the file.

Run these under cmd: