Error : blocked by CORS policy

Support
1

Hi Team,

Call api from my frontend , get following error:
Access to XMLHttpRequest at ‘http://localhost:8080/oauth/token’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
xhr.js:210 POST http://localhost:8080/oauth/token net::ERR_FAILED
dispatchXhrRequest @ xhr.js:210
xhrAdapter @ xhr.js:15
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:108
Axios. @ Axios.js:140
wrap @ bind.js:9
login @ auth.api.ts:7
login @ index.tsx:8
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
createError.js:16 Uncaught (in promise) Error: Network Error

  • at createError (createError.js:16)*
  • at XMLHttpRequest.handleError (xhr.js:117)*

I have try to set property config in my Jmix server: jmix.rest.allowedOrigins=http://localhost:3000 , *
But no luck.
Please help me!

2

Perhaps you just have to set proxy in your package.json:

{
  ...,
  "proxy": "http://localhost:8080"
}

No need to configure CORS if your production frontend will be deployed on the same host/port as your backend.

Regards,
Konstantin

3

I try set proxy in package.json, but get same issue. I think problem is not from my frontend, because it is simple app I have use with create-react-app . And also it’s work perfect when i change connection to my old backend Cuba-Platform v7.2 in the same host (localhost).

4

I’ve created a simple frontend with create-react-app and added proxy to package.json as described above.
The frontend app in dev mode on port 3000 perfectly connects to the Jmix backend running on 8080. I didn’t make any changes on the backend.

import logo from './logo.svg';
import './App.css';
import { useState, useEffect } from 'react'

function App() {
  const [ authenticated, setAuthenticated ] = useState(false)

  useEffect(() => {
    fetch('/oauth/token', {
      method: 'POST',
      headers: {
          'Authorization': 'Basic ' + btoa('client:secret'),
          'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `grant_type=password&username=admin&password=admin`
    })
    .then(response => {
      if (response.status < 200 || response.status >= 300) {
        throw new Error(response.statusText)
      }
      return response.json()
    })
    .then(() => setAuthenticated(true))
    .catch(() => setAuthenticated(false))
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {authenticated ? 'Authenticated!' : 'Not authenticated :('}
        </p>
      </header>
    </div>
  );
}

export default App;

The project is attached:
app-frontend.zip (292.7 KB)

1 Like
5

I have try as your advice,

  1. Add proxy to package.json: “proxy”: “http://localhost:8080”
  2. Change my URL request from “http://localhost:8080/oauth/token” to ‘/oauth/token’
    Then my project it is working.
    But in request i see: Request URL: http://localhost:3000/oauth/token
    Its not thing as my expected . I want my frontend connect to backend URL like : http://localhost:8080/oauth/token as old cuba-platform project. Because , i have more than 2 backends
  3. backend service1 on http://localhost:8081
  4. backend service2 on http://localhost:8082
    …
    Why Jmix CORS is not working as Old Cuba-platform done???
7

Hi,
here is the GitHub issue. It will be fixed in the upcoming Jmix 1.1.0.

9

Thanks for this thread. Spent two days searching for this problem.

@gorbunkov can You please inform about 1.1 release date?
Thanks in advance!

10

btw
we’ve temporarily solved this issue by deploying nginx-based reverse proxy and pointing

I hope that can help you