Sitecore Forms CORS/Verification token error in Chrome, works in Firefox

Question

I am trying to submit a form in Angular, through JSS. In chrome, I get a CORS error complaining the access-control-allow-origin header is missing. Just for fun, I added this to application_beginRequest in global.asax.cs:

if (HttpContext.Current.Request.HttpMethod == "OPTIONS" && HttpContext.Current.Request.Path.StartsWith("/api/jss/formbuilder"))
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");
    HttpContext.Current.Response.StatusCode = 200;
    HttpContext.Current.Response.End();
}

But I still get CORS errors, the code isn't even hit. When I attach the debugger, I actually catch this exception in Application_Error(): "The required anti-forgery cookie \"__RequestVerificationToken\" is not present.", hinting that it's not even a CORS issue, as Chrome suggests.

In the browser, I can see the token being included with the form data: __RequestVerificationToken: {random string}. I know it isn't being cached, since I can refresh and see a new token passed.

This all happens in Chrome & Brave, but not Firefox. What is going on??

Answer 1

Apparently I left out a detail that I didn't realize was important. My angular code was served up from a node server on initial page load, meaning that sitecore was working in headless mode. In the JSS forms documentation:

If you are using headless mode, set sitecoreApiHost={''}, so requests will be sent directly to your node server. If you send requests directly to Sitecore instance you will get an error (only in headless mode)

I wish the docs would have said what sort of error you get, but it must be that requestVerificationToken error. All i needed to do was have the app submit forms to node on initial (server rendered) page load, and then directly to sitecore on other (browser rendered) page loads