CORS error when using Okta OIDC with Vue.js and Spring boot on same port

I will start by saying I am new to this, if there is additional information needed just let me know and I can add it …
I am trying to follow the tutorial at Build a Simple CRUD App with Spring Boot and Vue.js | Okta Developer, and have been running into some issues. The one difference I have from the set up on the link is that I have both the Spring boot backend and vue.js front end running on the same port. The build process deploys the vue.js app to the classpath of the Spring boot project.

In my Spring security configuration, I am only authenticating /<api_url>/** URLs. Basically, http
.antMatchers("/api/**").authenticated().anyRequest().permitAll())
I have added the okta.oauth2.issuer, okta.oauth2.clientId, okta.oauth2.scope properties in my application.yml. “@EnableResourceServer” annotation is included with the SpringBootApplication, and a CORS filter bean set up with the following line included:
config.setAllowedOrigins(Collections.singletonList(“http://localhost:8080”));

The URL (http://localhost:8080) has been added to the trusted origins with CORS & Redirect under API in my Okta org set up.
But as soon as I try to hit my spring boot backend controller, I see the following error (spaces added ti URLs for posting question):

Access to XMLHttpRequest at ‘https ://dev-xxxxxxxx.okta.com/oauth2/default/v1/authorize?response_type=code&client_id=<client_id>&state=%3D&redirect_uri=http://localhost:8080/login/oauth2/code/okta’ (redirected from 'http ://localhost:8080/<api_url>) from origin ‘http ://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Any idea what I may be missing here?