JSS start connected mode issue

Question

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.

Answer 1

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.