Access to fetch at "backend_url" from origin "frontend_url" has been blocked by CORS policy

Support
1

Hi everyone,

I would like to call backend to login. I invoke a jwtoken from frontend. No problem to generate in backend and the frontend receive the good jwtoken.

https://www.example.com/api/v1/authenticate

response :

jwtToken: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzdG9ja21hbmFnZXIiLCJleHAiOjE2NDMzODc1NjQsImlhdCI6MTY0MzM2OTU2NH0.mYl10_v5Dm3S6K0lM5uBOLs1x2rYwC76ZkJ9w6-QOTw1tE7xjiKxMIOiiU6QgwsKxqtDmz31aCEA4ePY2IzkUQ"

Request URL: https://www.example.com/api/v1/authenticate
Request Method: POST
Status Code: 200  (from service worker)
Referrer Policy: strict-origin-when-cross-origin

But I would like to GET a user with authentification in the header of the call

https://www.example.com/api/v1/users/find

Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzdG9ja21hbmFnZXIiLCJleHAiOjE2NDMzODc1NjQsImlhdCI6MTY0MzM2OTU2NH0.mYl10_v5Dm3S6K0lM5uBOLs1x2rYwC76ZkJ9w6-QOTw1tE7xjiKxMIOiiU6QgwsKxqtDmz31aCEA4ePY2IzkUQ
Payload : {username: "example", password: "password"}

Unfortunately there a CORS Error :

Access to fetch at 'https://www.example.com/api/v1/users/find' from origin 'https://www.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I need some Help, please :sweat_smile:

PS : do not hesitate to let me know if my request does not concern this forum :slight_smile:

2

hi there, welcome.

if you search CORS in these forums, you might find some helpful posts that can assist with overcoming this.

Basically, you are trying to connect to an insure URL http://example.com from a secure URL https://example.com and this is why this error occurs.

2 Likes
3

Hi, Thx for your answer.

Iā€™m sorry, I made a mistake in my post (I corrected the mistake). Indeed the error message is the following :

Access to fetch at 'https://www.backend.com/api/v1/users/find' from origin 'https://www.frontend.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
4

I solved the issue by update my backend :wink:
I add httpSecurity.cors() in the configure() method;

@EnableWebSecurity
@RequiredArgsConstructor
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(final HttpSecurity httpSecurity) throws Exception {
        httpSecurity.csrf()
                    .disable()
                    .authorizeRequests()
                    .mvcMatchers("/api/v1/authenticate")
                    .permitAll()
                    .anyRequest()
                    .authenticated()
                    .and()
                    .exceptionHandling()
                    .authenticationEntryPoint(this.jwtAuthenticationEntryPoint)
                    .and()
                    .sessionManagement()
                    .sessionCreationPolicy(SessionCreationPolicy.STATELESS);

        httpSecurity.cors();

        httpSecurity.addFilterBefore(this.jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
    }
}

The backend can now getHeaders, so Authorization.

Thank you very much for your Help !!!