CORS error

[alpine verge]

i used to run my project on localhost and everything was great. But if i build frontend for deployment, i get this:

[wise nacelle]

<@&1004656351647117403> please have a look, thanks.

Here is an AI assisted attempt to answer your question 🤖. Maybe it helps! In any case, a human is on the way 👍. To continue talking to the AI, you can use </chatgpt:1108714622413963314>.

If you are encountering CORS (Cross-Origin Resource Sharing) errors when deploying your Java Spring project with a built frontend, it means that the frontend is making requests to the backend from a different origin (domain, protocol, or port) than the one it was served from.

To resolve this issue, you need to configure CORS settings in your Java Spring backend to allow requests from the frontend's origin. Here's how you can do it:

1. Add the @CrossOrigin annotation to your controller class or specific handler methods. For example:

@RestController
@CrossOrigin(origins = "http://frontend-domain.com")
public class YourController {
    // Controller methods...
}

Replace "http://frontend-domain.com" with the actual domain of your frontend.

2. If you want to allow requests from any origin, you can use @CrossOrigin(origins = "*"). However, this should only be used for development purposes and not in production.

3. If you need more fine-grained control over CORS settings, you can create a separate configuration class and extend WebMvcConfigurerAdapter. Here's an example:

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://frontend-domain.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

Again, replace "http://frontend-domain.com" with your actual frontend domain.

4. If your backend is using Spring Security, make sure to configure CORS settings there as well. You can do this by extending WebSecurityConfigurerAdapter and overriding the configure(HttpSecurity http) method. For example:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable();
    }
}

This will disable CSRF protection and enable CORS.

After making these changes, rebuild and redeploy your project, and the CORS errors should be resolved.

[oak drift]

Hi there

If you arent using spring security

[alpine verge]

HAHAHAH

[oak drift]

Aah it's you!

[alpine verge]

i am not

[alpine verge]

let's hop on last post

[oak drift]

alright, try with that @CrossOrigin annotation first

also follow what AI said

it may help ya

[alpine verge]

i have it everywhere

[oak drift]

alright

what tool are you using in react to fetch api ?

[alpine verge]

Fetch API 🤣 🤣 🤣 🤣 😂

[oak drift]

not recommended for react today

[alpine verge]

bruh. On react server people said, that axios and Jquery suck

[wise nacelle]

Changed the category to Frameworks.

<@&987246452180930620> please have a look, thanks.

[oak drift]

yeah

but there are more powerful tools

https://tanstack.com/query/v3/docs/react/overview

such tools, have integrated controls for cors, headrs, caching etc..

[alpine verge]

by the way, webconfig, that u suggested crashes by code

[oak drift]

is there any error ?

[alpine verge]

yeah

[oak drift]

i thought i've asked you already

why are you using that path pattern ?

and u didn't answer me

¯_(ツ)_/¯

[alpine verge]

sorry, amigo

did not see the question

[alpine verge]

buecase dude, whose github i sent you, uses it to output frontend

[oak drift]

i mean this: spring.mvc.pathmatch.matching

why are you setting it explicitly like this ?

[alpine verge]

the same reason. i just followed instructions

[oak drift]

instructions of WHAT ?,

[alpine verge]

of packaging react app into spring boot app

[oak drift]

that doesn't make any sense

it's irrelevent

[alpine verge]

do you remember video, that i dm'd u?

[oak drift]

no

[alpine verge]

this all comes from that video

[alpine verge]

https://www.youtube.com/watch?v=_CLLw3QAuOE

[oak drift]

sorry dnt have time to watch

[alpine verge]

last 10 mins

[oak drift]

the videos is outdated

1 year ago

are you serious ?

[alpine verge]

maybe, i trust you

[oak drift]

do not follow youtube

[alpine verge]

ok

[oak drift]

remove that property pls

and retry

[alpine verge]

okey

[alpine verge]

actually interesting. Just found stackoverflow post with the same pom.xml code

@oak drift

i fixed it

only error with CORS is left

[oak drift]

what is it

can you show please

[oak drift]

if you have @CrossOrigin("*") in our server app

then the problem now is in frontend

you have to handwrite some controls to allow cors, there are some headers

and mode

that's why i suggest to use a smart library like React Query

the frontend has grown up today, it becomes a whole ecosystem

not like the old days

[alpine verge]

i will try

[oak drift]

everything evolve fast now, os, browser, ide, frameworks

[alpine verge]

As you can see, i am at the beginning of my coding journey, and sometimes looking at those growing technologies like AI makes me feel kind of useless or replaceable in few years or decades.

And usually i just become insecure about my decision ater those thoughts

[alpine verge]

never mind