使用Axios调用Vimeo API发送POST请求遇CORS错误，但表单提交正常

Hey there! Let's break down why your axios request hits a CORS error while the regular form submission works, plus show you how to auto-submit the form without any user input.

Why Form Submission Works But Axios Doesn't #

The core difference comes down to how browsers handle two types of requests:

• Traditional form navigation: When you submit a form normally, the browser triggers a full page navigation to the target URL. This kind of request isn't bound by the strict CORS policy that applies to JavaScript-initiated calls. The browser won't block the upload itself (even if the server doesn't send an Access-Control-Allow-Origin header) — it just prevents your JS from reading the response data afterward.
• Axios/AJAX requests: These use the XMLHttpRequest API under the hood. For these, browsers enforce CORS strictly: the target server must return an Access-Control-Allow-Origin header that includes your origin (http://localhost:3000 in your case) to let the request succeed. Since Vimeo's upload endpoint doesn't include this header for AJAX requests, you get the CORS block.

How to Auto-Submit the Form Without User Interaction #

Since you already have the video file stored in the client, you can dynamically build and submit the form using JavaScript. This mimics a user manually submitting the form, so it avoids the CORS issue entirely. Here's how to do it:

Step-by-Step Implementation #

1. Extract form details from Vimeo's response: Grab the action URL (you already have this as resJson.upload.upload_link) and all hidden fields from the original upload.form HTML.
2. Build the form dynamically in JS, populate all required fields (including your video file), then trigger submission.

Here's a working code example:

// Assume you have these values from Vimeo's response
const uploadUrl = resJson.upload.upload_link;
const videoFile = YOUR_PRE_EXISTING_VIDEO_FILE; // Your client-side File object
// Extract hidden fields from Vimeo's form HTML (parse the upload.form content)
const requiredHiddenFields = [
  { name: 'csrf_token', value: 'EXTRACTED_CSRF_VALUE' },
  { name: 'upload_id', value: 'EXTRACTED_UPLOAD_ID' },
  // Add any other hidden fields from the Vimeo-provided form
];

// Create the form element
const autoSubmitForm = document.createElement('form');
autoSubmitForm.action = uploadUrl;
autoSubmitForm.method = 'POST';
autoSubmitForm.enctype = 'multipart/form-data';

// Add all required hidden fields
requiredHiddenFields.forEach(field => {
  const input = document.createElement('input');
  input.type = 'hidden';
  input.name = field.name;
  input.value = field.value;
  autoSubmitForm.appendChild(input);
});

// Add the video file field
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'file'; // Match the file input name from Vimeo's form

// Set the file programmatically (since we already have it in the client)
const dataTransfer = new DataTransfer();
dataTransfer.items.add(videoFile);
fileInput.files = dataTransfer.files;

autoSubmitForm.appendChild(fileInput);

// Attach form to DOM (required by some browsers to trigger submission)
document.body.appendChild(autoSubmitForm);

// Trigger auto-submission
autoSubmitForm.submit();

// Clean up: remove the form after submission
setTimeout(() => {
  document.body.removeChild(autoSubmitForm);
}, 100);

Key Notes #

• Make sure you copy all hidden fields exactly from Vimeo's provided form — missing any required fields will cause the upload to fail.
• This method works because it's identical to a user manually submitting the form: the browser handles it as a navigation request, so CORS restrictions don't apply.
• You won't be able to read the upload response with JS (due to the same CORS rules), but the upload itself will complete successfully.

内容的提问来源于stack exchange，提问作者Ming Kang Siow