Issue with Flask-Cors in Nuxt with Flask and JWT authentication implementation

I have exhausted all the available solutions to my issue, but I still can't seem to pinpoint the problem.

Despite trying every solution out there, nothing seems to be of any help.

Every time I make a request, the browser blocks it due to CORS Policy.

My Flask App is responding to OPTIONS call with status code 308.

I even attempted adding

resources={r"*": {"origins": "*"}}
during object initialization.

I also tried using

app.config['CORS_HEADERS'] = 'Content-Type'

But nothing seems to work.

Backend:

from flask import Flask, make_response
from flask_cors import CORS

from tracer.blueprints.auth import app as auth_blueprint
from tracer.blueprints.url import app as url_blueprint

app = Flask(__name__)
CORS(app)

app.register_blueprint(auth_blueprint, url_prefix='/auth')
app.register_blueprint(url_blueprint, url_prefix='/url')

@app.route('/')
def home():
    return make_response('<center><h2>APIs hosted here.</h2></center>')

if __name__ == '__main__':
    app.run()

Frontend: (Nuxt Axios):

context.$axios.setHeader('token', token);
context.$axios.setHeader('Content-Type', 'application/json')
const response = await context.$axios.$post(
 "http://127.0.0.1:5000/url",
 {
   redirect: url
 }
);

Answer №1

After some troubleshooting, I managed to find the solution to my issue and wanted to share it with others.

The problem stemmed from utilizing url_prefix within blueprints, causing conflicts with flask_cors. My recommendation for anyone facing a similar problem is to eliminate the use of url_prefix in the register_blueprint function and instead manually incorporate the URL prefix in the route definition.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Nested Promise.all within another Promise.all appears to terminate prematurely, triggering a warning indicating failure to return from a promise

I am utilizing this function to be invoked within another Promise.all. However, I consistently encounter a warning message: Caution: a promise was generated in a handler but was not returned from it. Additionally, the function deleteFutureAppointments() ap ...

How to Choose Between Landscape and Portrait Printing Modes in Firefox and Internet Explorer 8

Currently, I am using the latest version of FireFox and IE8. In order to change the printing orientation, I utilized the following code in my CSS file: @page { size: portrait; } You can find more information about the @page property here. Although it i ...

Issue in VueJs where mutations do not properly save new objects to the state

I am facing an issue with updating my vuex store after modifying my user credentials in a component. Below is the code snippet for reference: mutations: { updateUserState: function(state, user) { state.user = user; }, } actions: { updat ...

What is the best way to send a JSON string as a prop?

I am integrating Vue.js with Shopify, and I am trying to pass objects from Liquid into a Vue component as a prop. An example scenario would involve using the product object in Liquid from Shopify and converting it directly into an object within Vue. Ideall ...

Using indented, multi-line logging in a NodeJS environment can help to

I'm looking for a way to display objects that have been printed with JSON.stringify() in the console, specifically within the context of a Mocha test suite output. While my tests are running, I want the object log lines to be indented further to the ...

Implement 2 new search options into the datatable plugin

Looking to enhance my existing panel by adding 2 search options: Here are the credentials you'll need: username: admin pass: Nopass1234 The additional features I want to include are: 2 search options: 1. from date 2. to date What will happen w ...

How can I show a legend entry for every column in Amcharts?

Take a look at this code snippet: http://jsfiddle.net/ouLed1fp/ How can I create a legend entry for each column in the chart? Also, is there a way to display the column names next to them, providing a clear legend? <div id="chartdiv" style="width: 10 ...

What is the best way to bring a module into an Angular project?

I have a project in Angular with an additional module created as an npm package. The structure of the module is as follows: --otherModule --other-module.module.ts --index.ts --package.json index.ts: export { OtherModule } from './other-module ...

In Node.js, JavaScript, when using SQLite, the variables are inserted as Null

I have spent a lot of time searching and trying various methods, but I am still unable to solve this issue. My goal is to insert 8 variables received from an API call into an SQLite table. Although the execution seems correct, when I query the table, all v ...

ajax modal form editing

Encountered an issue with editing a form using modal ajax, where the edit form pops up but the data remains empty. The code snippet for my controller: public function edit() { $id=$this->uri->segment(3); $data=array( 'project' => $th ...

Discover the power of Material UI combined with React Router to create dynamic BreadCrumbs with unique

I am facing a challenge while trying to incorporate material-ui breadcrumbs with reactRouter. The issue arises because the script is unable to find the correct string for ':id' in the breadcrumbs when it is not specified. (It works as intended wh ...

Unexplained disappearance of div element in Vue Router's Navbar

I have been working on integrating a Vue Router into my navbar and everything seemed to be going well. You can check out the code here. The navigation menu I created works perfectly, allowing users to navigate between the home template and about template w ...

Why is it necessary to initialize self.args in the class MyException(Exception)?

class DeviceError(Exception): def __init__(self,errno,msg): self.args = (errno, msg) self.errno = errno self.errmsg = msg # Raises an exception (multiple arguments) raise DeviceError(1, 'Not Responding') Gallagher: p ...

What factors contribute to the poorer performance of SVG rendering compared to PNG rendering?

I conducted a comparison of two images across various browsers. One image is an SVG while the other is a PNG format. Here are my findings: You can view the demo on JSFiddle here: http://jsfiddle.net/confile/2LL5M/ This is the code snippet I utilized: ...

Troubleshooting issues with AngularJS routing

Having trouble clicking on the show button and seeing anything displayed. I've spent a lot of time on this without success, can someone please assist. Files.... app.js controller.js index.html show.html index.html <html ng-app='Java4sApp& ...

Issue with hook not updating when invoked inside useEffect

I'm encountering an issue with updating the state after fetching data from my API. The API response seems to be correct, but for some reason, my weatherData-hook is not getting updated and it returns undefined. Can anyone point out what mistake I migh ...

When an image is clicked, I am attempting to access data from a Sharepoint list

In my Sharepoint list, there are three columns: Image, Title, and Description. I am using ajax to retrieve the items from the list. The images can be successfully retrieved, but my goal is to display the title and description of the clicked image when an ...

Tips for operating an Express application with React in production mode

My web application has a specific file structure as shown in the image below. https://i.stack.imgur.com/Etzdb.png I'm facing difficulties running my web app with the React Production Build. The following code snippet in my index.js doesn't seem ...

Tips on accessing a function or variable within a script executed using $.getScript

After running a script with $.getScript, is there a way to access the namespace of that script? I expected to be able to do so since the plugin function is defined in the global scope. index.js $.getScript('plugin.js').then((...result) => co ...

What separates name="" from :name=""?

If the :name="name" syntax is used, the value of the name attribute will be the unique data it receives from the props. However, if I use name="name" without the preceding :, then it will simply be "name". What role does the : play in the name attribute? ...