JSS start connected mode issue, using JSS Tech Preview 4, React, Sitecore 9 Update2.

Here is the complete log.

jss.sc/sitecore/api/jss/dictionary/my-first-jss-app/en?sc_apikey={078944F4-4AAB-4086-9C04-060BAE991F81}:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)
(index):1 
Failed to load http://jss.sc/sitecore/api/jss/dictionary/my-first-jss-app/en?sc_apikey={078944F4-4AAB-4086-9C04-060BAE991F81}: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
(index):1 
Failed to load http://jss.sc/sitecore/api/layout/render/jss?item=%2F&sc_lang=en&sc_apikey=%7B078944F4-4AAB-4086-9C04-060BAE991F81%7D: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
index.js:1 
Route data fetch error Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
function.console.(anonymous function) @ index.js:1
(index):1 
Uncaught (in promise) TypeError: Failed to fetch

And the browser shows this.

enter image description here

UPDATE

I was able to reproduce the issue via the steps below.

In a single browser window, multiple tabs:

  1. Login to Sitecore
  2. Open JSS app in Experience Editor (keep tab open)
  3. Wait for forms auth to timeout (set to 1 minute in web.config)
  4. In a separate tab, in the same browser window where EE is open, request http://localhost:3000 in connected mode
  5. See CORS error due to: Exception: System.Web.HttpException Message: Cannot redirect after HTTP headers have been sent. Source: System.Web at System.Web.HttpResponse.Redirect(String url, Boolean endResponse, Boolean permanent) at Sitecore.Shell.Web.ShellPage.GotoLoginPage(HttpContext httpContext, Boolean returnAfterLogin) at Sitecore.Shell.Web.ShellPage.IsLoggedIn(Boolean returnAfterLogin) at Sitecore.Mvc.Pipelines.Request.RequestBegin.EnsureLoggedInForPreview.Process(PipelineArgs args) ... rest omitted for brevity

The CORS error was being thrown by the browser because the 500 error on the server prevents the CORS headers from being sent.

This is a bit of an edge case and something the core platform would need to address. We'll register this as a "known issue" and add it to the docs site FAQs / known issue.

The workaround / solution is to either logout of Sitecore, set EE to preview mode, or browse to localhost:3000 in an incognito window or completely separate browser (e.g. Firefox, Edge).

I'll leave the original answer because the troubleshooting steps are still relevant.


The error messages are indicating that perhaps CORS isn't configured properly. You may need to adjust your Sitcore JSS API key accordingly, here's info on how to do that: https://jss.sitecore.net/docs/getting-started/app-deployment#step-2-api-key

Specifically, the following fields (copied from JSS docs for SEO / long-term reach):

  • CORS Origins: If you will be using connected mode (quite likely), the APIs will need to support CORS so that your dev server (default: http://localhost:3000) is allowed to make HTTP calls to the JSS services. For purely local development setup, use * to allow all origins. In production, only allow specific origins (multiple origins are ;-delimited).

  • AllowedControllers: Use the value shown below. It is also possible to use *, but explicitly whitelisting controllers is a best practice. If you use additional custom SSC API controllers, they would need to be added to this list. Sitecore.LayoutService.Mvc.Controllers.LayoutServiceController; Sitecore.JavaScriptServices.Globalization.Controllers.DictionaryServiceController; Sitecore.Services.GraphQL.Hosting.Mvc.GraphQLController

  • Impersonation User: always specify an explicit user. The impersonation user is a Sitecore user whose security context is used to determine the security rights of the JSS app to Sitecore content. Most apps should use extranet\anonymous, giving them the same security context as any anonymous web user. Note that authenticated users (with valid Sitecore auth cookies) will receive their own security context regardless of this setting; it applies only to anonymous requests.

If that doesn't solve the problem, I would check the Sitecore logs for more detailed error information as the console error is indicating that the server is responding with a 500 status code - meaning something isn't working properly on the Sitecore side.

  • They are configured correctly, I have checked. Let's see the sitecore log – Sitecore Sam Aug 16 at 18:24
  • found something, run this command chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security it works, which means is something related to web security. Followed your updated solution, and opened the connected mode http://localhost:3000/ in another browser, but still the same not found. I thing that might help is it is producing on SC9u2 and works fine on SC9u1. thnx for the help – Sitecore Sam Aug 16 at 20:37
  • Yes, using disable-web-security would technically work because it disables all CORS restrictions, which is the error you're experiencing in the browser. That means something on the Sitecore end is preventing CORS headers from being sent or the CORS headers are invalid. I would recommend checking the Sitecore logs for ERROR-level messages. They likely won't mention CORS specifically, but will cause the server to error in such a way that breaks CORS. – Adam Weber Aug 16 at 21:27
  • I should add, if it's not already obvious, that using disable-web-security is not a long-term solution and is only masking the real issue. – Adam Weber Aug 17 at 13:53
  • So, true. As you might have already reported as a "known issue", I am using my older SC9u1 version for now. Thanks – Sitecore Sam Aug 17 at 13:55

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.