I'm trying to upload a video from localhost:3000 using the Resumable Upload API, following this documentation.

I'm logging as a Facebook user using the Facebook Javascript SDK.

Then I fetch the list of Pages that user is managing.

Using the FB SDK (FB.api()), I make this request to create an upload session:

curl 'https://graph.facebook.com/v20.0/6923533587678832/uploads?access_token=<USER_ACCESS_TOKEN>' \
  -H 'accept: */*' \
  -H 'accept-language: en-GB,en-US;q=0.9,en;q=0.8' \
  -H 'content-type: application/x-www-form-urlencoded' \
  -H 'origin: https://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: https://localhost:3000/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36' \
  --data-raw 'file_length=148397580&file_name=story_0.mp4&file_type=video%2Fmp4&method=post&pretty=0&sdk=joey&suppress_http_code=1'

Which returns a session id like { id: upload:xxxx}. So far, so good.

The next request, which initiates the upload, requires a binary file and headers, and I couldn't find a way to set headers on FB.api(), so I'm using axios instead.

export const startFbUpload = async (params: {
  uploadSessionId: string;
  accessToken: string;
  file: Blob;
}) => {
  const response = await axios.post<{ h: string }>(
    `https://graph.facebook.com/${FB_SDK_VERSION}/${params.uploadSessionId}`,
    params.file,
    {
      headers: {
        'Content-Type': params.file.type,
        Authorization: `OAuth ${params.accessToken}`,
        file_offset: '0',
        // 'Access-Control-Allow-Origin': '*',
      },
      maxBodyLength: Infinity,
      maxContentLength: Infinity,
      responseType: 'json',
    },
  );
  return response.data;
};

This method results in two requests, which I’ll display as curl requests. The first is the ‘preflight’ request:

curl 'https://graph.facebook.com/v20.0/upload:<SESSION_ID>' \
  -X 'POST' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'Authorization: OAuth <USER_ACCESS_TOKEN>' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36' \
  -H 'Content-Type: video/mp4' \
  -H 'file_offset: 0' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'Referer: https://localhost:3000/' \
  -H 'sec-ch-ua-platform: "macOS"'

Which errors out with:

Access to XMLHttpRequest at 'https://graph.facebook.com/v20.0/upload:<SESSION_ID> from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Then there’s also this this OPTIONS request

curl 'https://graph.facebook.com/v20.0/upload:<SESSION_ID>?sig=ARaX46WhGl9x_QuFUpE' \
  -X 'OPTIONS' \
  -H 'accept: */*' \
  -H 'accept-language: en-GB,en-US;q=0.9,en;q=0.8' \
  -H 'access-control-request-headers: authorization,content-type,file_offset' \
  -H 'access-control-request-method: POST' \
  -H 'origin: https://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: https://localhost:3000/' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

Which returns a 403 error.

Being a CORS error, I’m thinking the solution lies in the Facebook app configuration. I’ve set “Allowed Domains for the JavaScript SDK” to include localhost:3000, but I don’t see any config options related to CORS.

I believe I have the correct permissions configured. The FB app’s type is ‘business’, but it doesn’t have ‘advanced access’ yet (still waiting for business and access verification). However, I don’t think that should matter because the Facebook user I’m making the requests with is directly associated with the Facebook app.

What do I need to do to get past this CORS / 403 error?