如何将指定Curl请求转换为兼容全浏览器的JavaScript POST请求

Got it, let's turn that Stripe OAuth curl command into a fully cross-browser compatible JavaScript POST request. I'll cover both jQuery (since you started with $.ajax) and vanilla JavaScript solutions to ensure compatibility across modern browsers and older ones like IE8+.

jQuery Solution (Simpler, for environments with jQuery) #

This completes the partial $.ajax code you started with, and ensures proper form-data encoding which matches your original curl request:

$.ajax({
  url: "https://connect.stripe.com/oauth/token",
  type: "POST",
  contentType: "application/x-www-form-urlencoded",
  data: {
    client_secret: "sk_test_f7PKXx5NRBFG5r41nTrPT7qB",
    code: "{AUTHORIZATION_CODE}",
    grant_type: "authorization_code"
  },
  success: function(response) {
    // Handle successful token retrieval
    console.log("OAuth Token Response:", response);
    // Example: Store access token for future API calls
    // localStorage.setItem('stripe_access_token', response.access_token);
  },
  error: function(xhr, status, errorMessage) {
    // Handle errors (e.g., invalid authorization code, expired secret)
    console.error("OAuth Request Failed:", errorMessage);
    console.error("Full Error Details:", xhr.responseText);
  }
});

Key Notes for jQuery Version: #

• The contentType header ensures your data is sent in the same application/x-www-form-urlencoded format as the curl command.
• jQuery automatically encodes the data object into the correct form format, so you don't need to manually stringify or encode parameters.

Vanilla JavaScript Solution (Cross-Browser, No jQuery) #

If you need to support environments without jQuery (or older browsers like IE6/7), use this native XMLHttpRequest implementation:

// Create cross-browser compatible XHR object
const xhr = window.XMLHttpRequest 
  ? new XMLHttpRequest() 
  : new ActiveXObject("Microsoft.XMLHTTP");

xhr.open("POST", "https://connect.stripe.com/oauth/token", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// Handle response
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // Parse JSON response (wrap in try/catch for older browsers)
      try {
        const response = JSON.parse(xhr.responseText);
        console.log("OAuth Token Received:", response);
      } catch (parseError) {
        console.error("Failed to parse response:", parseError);
      }
    } else {
      console.error("Request Failed. Status Code:", xhr.status);
      console.error("Error Response:", xhr.responseText);
    }
  }
};

// Manually encode form data (required for native XHR)
const formData = [
  `client_secret=${encodeURIComponent("sk_test_f7PKXx5NRBFG5r41nTrPT7qB")}`,
  `code=${encodeURIComponent("{AUTHORIZATION_CODE}")}`,
  `grant_type=${encodeURIComponent("authorization_code")}`
].join("&");

xhr.send(formData);

Key Notes for Vanilla Version: #

• We use a fallback to ActiveXObject for older IE versions that don't support XMLHttpRequest.
• Parameters are manually encoded with encodeURIComponent to avoid issues with special characters.
• The onreadystatechange handler checks for the completed request (readyState === 4) and valid status code (200).

Critical Security Warning #

Never include your Stripe client_secret in client-side JavaScript! This secret grants full access to your Stripe account, and exposing it in frontend code will let attackers take over your account.

The secure approach is:

1. Your frontend sends only the {AUTHORIZATION_CODE} to your own backend server.
2. Your backend server uses the client_secret to call the Stripe OAuth endpoint securely.
3. Your backend returns only the necessary data (like the connected account ID or access token) to the frontend.

内容的提问来源于stack exchange，提问作者jone2