Unable to use REST API in Jmix 2.0 due to CORS issues

Support
#1

Hi,
I am trying to integrate a Jmix 2.0 (FlowUI) application with a third party React solution built on next.js framework but I am constantly getting the following error when I am trying to get the access token:

Access to fetch at 'http://localhost:8080/oauth2/token' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
_app.tsx:141 
        
POST http://localhost:8080/oauth2/token net::ERR_FAILED
login @ _app.tsx:141
handleLogin @ index.js:1
fn @ mutation.mjs:87
run @ retryer.mjs:101
createRetryer @ retryer.mjs:149
executeMutation @ mutation.mjs:81

In the React app, I am using the following code to call the API endpoint:

const clientID = "sahjkjjzgj";
      const clientSecret = "wqvyuVPCzg"
      const clientKey = `${clientID}:${clientSecret}`;
      const base64ClientKey = btoa(clientKey);
  
      console.log(base64ClientKey);

      fetch('http://localhost:8080/oauth2/token', {
        method: 'POST',
        body: 'grant_type=client_credentials',
        headers: {
          'Authorization': 'Basic ' + base64ClientKey
        }
      }).then(function (resp) {
        console.log(resp);
        // Return the response as JSON
        return resp.json();
      
      })

You can also find below the existing setup in the Jmix application where the REST add-on is installed:

spring.security.oauth2.authorizationserver.client.myclient.registration.client-id=sahjkjjzgj
spring.security.oauth2.authorizationserver.client.myclient.registration.client-secret={noop}wqvyuVPCzg
spring.security.oauth2.authorizationserver.client.myclient.registration.authorization-grant-types=client_credentials
spring.security.oauth2.authorizationserver.client.myclient.registration.client-authentication_methods=client_secret_basic
spring.security.oauth2.authorizationserver.client.myclient.token.access-token-format=reference

#Set the following params for Authorization server
jmix.authserver.client.myclient.client-id = sahjkjjzgj
jmix.authserver.client.myclient.resource-roles = system-full-access,rest-minimal

jmix.cors.allowed-origins=*
jmix.cors.allowed-headers=*
jmix.cors.allowed-methods=*
jmix.cors.url-patterns=/**
jmix.cors.allow-credentials= true

I have also tried to connect in a Jmix 1.5 application from the React app with a similar approach -since the authentication process is different- and it seems to be working properly.

Regards,
George

#2

Hi,

What exact Jmix 2 version do you use? CORS issues should have been fixed in 2.0.2

#3

Hi Maxim,
I am using the version 2.0.2. Is there any workaround so far?

Regards,
George

#4

Try to comment all jmix.cors.* properties that you added to the application.properties. By default all CORS requests are allowed anyway.

My guess is that this combination causes problems:

jmix.cors.allowed-origins=*
jmix.cors.allow-credentials= true

You cannot set the * allowed origins and allow-credentials=true simultaneously. Take a look at your Jmix application log. There should be an exception that explains this there.

#5

Hi Maxim,
I have removed all jmix.cors.* properties but I am getting again the same error while there is no message in the console window. How can I get the application log file and sent it to you in order to further analyze it?

Regards,
George

#6

Here is a react-frontend sample project. You may try running it on your side and check whether you have CORS issues there.

It would be great if you provide a similar sample: a minimal Jmix app and minimal react app that we can run at our side and see the error.

#7

Hi Maxim,
You can find below two sample projects to check:

GitHub - papageor/bpl-nextjs-demo (Jmix demo application)

GitHub - papageor/bpl-nextjs-react-demo (React demo app)

In the React app you can check the file:
/Pages /_app.tsx (lines 101-124)

Thank you
George

#8

It seems that the problem is that pre-flight requests for /oauth2/token have been blocked by a default security configuration. Try adding the following configuration to your project that enables OPTIONS requests:

@Configuration
public class MySecurityConfiguration {

    @Bean
    @Order(JmixSecurityFilterChainOrder.AUTHSERVER_AUTHORIZATION_SERVER - 10)
    public SecurityFilterChain optionsAuthorizationServerSecurityFilterChain(HttpSecurity http,
                                                                             HandlerMappingIntrospector hmi) throws Exception {
        http.securityMatchers(securityMatchers -> {
                    MvcRequestMatcher.Builder mvcRequestMatcherBuilder = new MvcRequestMatcher.Builder(hmi);
                    MvcRequestMatcher requestMatcher = mvcRequestMatcherBuilder.pattern(HttpMethod.OPTIONS, "/oauth2/**");
                    securityMatchers.requestMatchers(requestMatcher);
                })
                .cors(Customizer.withDefaults());
        return http.build();
    }
}

But for me it doesn’t seems to be a good idea to store client credentials in the application code. Anyone can see it.

#9

Hi Maxim,
I would like to thank you for your reply. It is now working properly! Just to ask if this type of configuration will be included by Jmix in a future release or we need to add it in every project that includes the REST add-on in order for the OPTIONS requests to be enabled?

As for the credentials, you are absolutely right but the React application was prepared by our partner just to help you understand the type of error. :slightly_smiling_face:

Regards,
George

#10

I’ve created an issue for this. It’s strange that the react-frontend sample I mentioned above works fine. It uses the authorization code grant type and there are no such errors there. We need to investigate this.

1 Like