unable to upload videos in local dev environment

This issue is fully reproducible on master (https://github.com/openedx/frontend-app-course-authoring/commit/815ddbe94ea8348d3322930cc51cfd6e542f6756 as of writing)

In my .env.development file I set

ENABLE_NEW_VIDEO_UPLOAD_PAGE = true
ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = true

At first I was getting 404 errors when trying to upload videos, so I went digging through edx-platform code and found

https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/toggles.py#L433-L437
https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/toggles.py#L217-L231
https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/xmodule/course_block.py#L1506-L1514
https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/video_storage_handlers.py#L570-L589
https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/video_storage_handlers.py#L181-L231
https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/video_storage_handlers.py#L216-L220
and
https://github.com/openedx/edx-platform/blob/6edc0c2dd9084a6892fd3a504ae71f2900d5ad4b/cms/djangoapps/contentstore/toggles.py#L500-L516

After which I set the following waffle flags

contentstore.mock_video_uploads
contentstore.enable_studio_content_api
contentstore.new_studio_mfe.use_new_video_uploads_page	
contentstore.new_studio_mfe.use_new_files_uploads_page

As well as the following Video Pipeline settings

Course video uploads enabled by defaults
Video uploads enabled by defaults

I then started getting 403 errors when trying to upload videos

{
    "httpErrorType": "api-response-error",
    "httpErrorStatus": 403,
    "httpErrorResponseData": "<Response is HTML>",
    "httpErrorRequestUrl": "http://localhost:18010/videos/course-v1:edX+DemoX+Demo_Course",
    "httpErrorRequestMethod": "post"
}

I then looked through https://openedx.atlassian.net/wiki/spaces/AC/pages/645726427/Video+Pipeline+Testing+Sandbox (thanks for pointing me to this @KristinAoki!)

I tried adding {"course_video_upload_token": "shared_course_token"} to the "Video Upload Credentials" textbox in Studio -> Advanced Settings as recommended there.

I could not find Oauth2 > Clients in django admin.

After that, I am still getting 403 errors.

Digging into the response a bit shows CSRF issues

<div id="summary">
  <h1>Forbidden <span>(403)</span></h1>
  <p>CSRF verification failed. Request aborted.</p>


</div>

<div id="info">
  <h2>Help</h2>
    
    <p>Reason given for failure:</p>
    <pre>
    Origin checking failed - http://localhost:2001 does not match any trusted origins.
    </pre>
    

  <p>In general, this can occur when there is a genuine Cross Site Request Forgery, or when
  <a
  href="https://docs.djangoproject.com/en/4.2/ref/csrf/">Django’s
  CSRF mechanism</a> has not been used correctly.  For POST forms, you need to
  ensure:</p>

  <ul>
    <li>Your browser is accepting cookies.</li>

    <li>The view function passes a <code>request</code> to the template’s <a
    href="https://docs.djangoproject.com/en/dev/topics/templates/#django.template.backends.base.Template.render"><code>render</code></a>
    method.</li>

    <li>In the template, there is a <code>{% csrf_token
    %}</code> template tag inside each POST form that
    targets an internal URL.</li>

    <li>If you are not using <code>CsrfViewMiddleware</code>, then you must use
    <code>csrf_protect</code> on any views that use the <code>csrf_token</code>
    template tag, as well as those that accept the POST data.</li>

    <li>The form has a valid CSRF token. After logging in in another browser
    tab or hitting the back button after a login, you may need to reload the
    page with the form, because the token is rotated after a login.</li>
  </ul>

  <p>You’re seeing the help section of this page because you have <code>DEBUG =
  True</code> in your Django settings file. Change that to <code>False</code>,
  and only the initial error message will be displayed.  </p>

  <p>You can customize this page using the CSRF_FAILURE_VIEW setting.</p>
</div>

@arbrandes has also been trying to get this working, but he has been using tutor instead

Start with the edx-platform entry points named in cms/djangoapps/contentstore/toggles.py and cms/djangoapps/contentstore/video_storage_handlers.py, then reproduce the POST to /videos/course-v1:edX+DemoX+Demo_Course. Trace the CSRF failure and local configuration across the frontend and Studio, and consider the issue done when local video uploads no longer return 403.