Unable to pass 'mode' option to fetch function

[i10111pn]

Hi.

I have a react application that is trying to connect to the nuxeo ui. Nuxeo is launched by a docker command:

docker run --name mynuxeo --rm -ti -p 8080:8080 -e NUXEO_PACKAGES="nuxeo-web-ui nuxeo-showcase-content nuxeo-template-rendering nuxeo-template-rendering-samples" -e NUXEO_CUSTOM_PARAM="org.nuxeo.dev=true\nallowOrigin=http://localhost:3000\nallowSubdomains=true\nsupportedMethods=GET,POST,HEAD,OPTIONS" nuxeo:9.10

and accessible in the browser at http://172.17.0.2:8080/nuxeo/ or http://localhost:8080/nuxeo/.

The react application is created by create-react-app. My package.json:

{
  "name": "react-nuxeo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.1.2",
    "nuxeo": "^3.15.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Inside of the react application, I have the next code:

  let nuxeo = new Nuxeo({
      baseURL: 'http://172.17.0.2:8080/nuxeo',
      auth: {
        method: 'basic',
        username: 'Administrator',
        password: 'Administrator'
      }
    });

    nuxeo.connect({
      mode: 'no-cors',
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    })
      .then((client) => this.setState({ nuxeo_status: 'connected' }))
      .catch((error) => this.setState({ nuxeo_status: 'error' }));

Which is producing next error:

I believe the root of the problem is in nuxeo.js file at line 126:

  const fetchOptions = {
        method: options.method,
        headers: options.headers,
        body: options.body,
        signal: options.signal,
      };

Because inside of the options I'm passing mode option which is not copied to the fetchOptions

When I manually edit nuxeo.js (inside my node_modules) to pass the mode option it fixes the CORS problem:

 const fetchOptions = {
        method: options.method,
        headers: options.headers,
        body: options.body,
        signal: options.signal,
        mode: options.mode
      };

Can you please add the ability to pass mode option?

[troger]

Hi,

AFAIK, the CORS config cannot be set by using NUXEO_CUSTOM_PARAM env variable, you need to add a new config file with the expected contribution/configuration. See https://doc.nuxeo.com/nxdoc/910/cross-origin-resource-sharing-cors/ for the related documentation.

[troger]

BTW, you should run the latest version of Nuxeo, nuxeo:10.10.

[i10111pn]

Thanks!

Launching docker image with cors config file fixed the issue.

docker run --name mynuxeo --user nuxeo:nuxeo --mount type=bind,source="/home/i10111pn/Configs/cors-config.xml",target=/opt/nuxeo/server/templates/docker/config/cors-config.xml.nxftl --rm -ti -p 8080:8080 -e NUXEO_PACKAGES="nuxeo-web-ui" nuxeo:9.10

Where cors-config.xml:

<component name="org.nuxeo.cors.config">
  <extension target="org.nuxeo.ecm.platform.web.common.requestcontroller.service.RequestControllerService" point="corsConfig">
    <corsConfig name="all" supportedMethods ="GET,POST,HEAD,OPTIONS,DELETE,PUT">
      <pattern>/nuxeo/.*</pattern>
    </corsConfig>
  </extension>
</component>