Development mode React - Code fails in ModelClient while navigating to http://localhost:9000/content/we-retail-journal/react/home.html

[chaurasiagovind]

Code fails in ModelClient while navigating to http://localhost:9000/content/we-retail-journal/react/home.html

`fetch(modelPath) {

    if (!modelPath) {
        let err = 'Fetching model rejected for path: ' + modelPath;
        return Promise.reject(new Error(err));
    }

    // Either the API host has been provided or we make an absolute request relative to the current host
    let url = `${this._apiHost}${modelPath}`;

    return fetch(url, FETCH_CONFIG).then(function(response) {
        if (response.status >= 200 && response.status < 300) {
            **return response.json();**
        } else {
            let error = new Error('while fetching the model for url: ' + url, response.statusText || response.status);
            error.response = response;

            return Promise.reject(error);
        }
    });
}`

we get an object instead of model.json and model.json request gets delayed then page dosn't load.

Any Ideas.

[chaurasiagovind]

Additional log

Response ___ body: (...) bodyUsed: false headers: Headers {} ok: true redirected: false status: 200 statusText: "OK" type: "basic" url: "http://localhost:9000/content/we-retail-journal/react.model.json" proto: Response

[pfauchere]

It is a known issue. We are planning to update the documentation to better describe that scenario. To enable the local server to serve the content, please proceed as follow:

• Update the CORS configuration of the AEM instance as follows -- Console Path: http://localhost:8080/system/console/configMgr -- Configuration name: Adobe Granite Cross-Origin Resource Sharing Policy --- Values: ---- Allowed Origins: domain (ex: http://localhost:4502) or * ---- Supported Headers: Authorization ---- Allowed Methods: OPTIONS
• Configure the authentication headers of your requests -- Instantiate a CustomModelClient such as [0] when initializing the ModelManager [1]
• Run the server and specify an API host -- API_HOST=http://localhost:4502 npm run start

[0] https://github.com/adobe/aem-sample-we-retail-journal/blob/master/react-app/src/server/CustomModelClient.js [1] https://github.com/adobe/aem-sample-we-retail-journal/blob/master/react-app/src/index.js#L42

[chaurasiagovind]

Thanks, this seems to be working for me.

[norbiorb]

Reopen issue for bringing the provided information to DEVELOPMENT.md

[norbiorb]

Closing this one as PR #17 is merged