AJAX POST请求结构、认证及localhost跨域CORS问题咨询

Hey there, let's break down your AJAX and CORS problems step by step—you're already ahead by testing with Postman, so let's fix the gaps in your code and clarify your questions.

First: Fix the Critical Code Errors #

Your initial code has several typos and syntax mistakes that are directly causing authorization failures. Let's correct those first:

1. Authorization Header Mistakes #

• Spelling error: Autorization → Authorization (you missed an "h")
• Missing space: The Basic scheme requires a space after it, e.g., "Basic " + btoa(...) (Postman adds this automatically, but code doesn't)
• Syntax error: In your GET code, username+":"password is missing a + between the colon and password—should be username+":"+password (template literals like ${username}:${password} are cleaner)

2. jQuery Method & Selector Errors #

• In POST code: $("#submit1").onclick should be $("#submit1").click() (jQuery uses .click() for click handlers)
• getValue() isn't a jQuery method—use .val() to get input values
• Missing # in $("formContactResellerId")—should be $("#formContactResellerId")
• Missing comma after dataType: "json" in the POST AJAX config
• .done() callback uses successFunction(data) but the parameter is named response—match the variable names

Answering Your Specific Questions #

1. GET Request 401 Unauthorized #

The main culprits are the Authorization header typos mentioned above. Once you fix those, the Basic auth should work as expected (just like it does in Postman). Double-check that your username/password are correctly formatted in the btoa() call—this function encodes a string to base64, so the format username:password is required.

2. POST Request Data Format #

jQuery's $.ajax() handles data in two common ways:

• Default (x-www-form-urlencoded): If you pass a plain object like { email: contactEmail, reseller_id: contactResellerId }, jQuery automatically encodes it for form data. This works if your backend expects form-encoded data.
• JSON format: If your backend requires JSON, add contentType: "application/json" to the AJAX config and stringify the data with JSON.stringify({ email: contactEmail, reseller_id: contactResellerId }).

3. 401: CORS vs. Authentication Error #

• If Postman works but your localhost code doesn't, it's likely a CORS issue—but first confirm your auth is correct (fix the header typos first!).
• When you send an AJAX request with Authorization headers, browsers send an OPTIONS preflight request to the server. Your backend must handle this OPTIONS request and return:
  • Access-Control-Allow-Origin set to your frontend origin (not * for secure setups)
  • Access-Control-Allow-Headers: Authorization to permit the auth header
  • Access-Control-Allow-Methods: GET, POST (or whatever methods you need)

4. .done() / .fail() Callback Parameters #

• .done(response): The first parameter is the parsed response data from the server (jQuery automatically parses it based on dataType—e.g., JSON if you set dataType: "json").
• .fail(jqXHR, textStatus, errorThrown):
  • jqXHR: The jQuery XHR object, which has details like status (e.g., 401), responseText, and getResponseHeader()
  • textStatus: A string describing the error type (e.g., "error", "timeout")
  • errorThrown: The raw error message (e.g., "Unauthorized")

Secure CORS Solutions (Avoid *) #

Setting Access-Control-Allow-Origin: * is insecure because it allows any site to access your API. Instead, use these safer options:

1. Whitelist Specific Origins #

Configure your backend to check the Origin header of incoming requests. If the origin is in your allowed list (e.g., http://localhost:3000, https://your-production-frontend.com), return that origin in Access-Control-Allow-Origin.

For example, in Node.js/Express:

const allowedOrigins = ["http://localhost:3000", "https://your-app.com"];

app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader("Access-Control-Allow-Origin", origin);
  }
  res.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  if (req.method === "OPTIONS") {
    return res.sendStatus(200);
  }
  next();
});

2. Local Development: Reverse Proxy #

Use a reverse proxy to avoid CORS entirely during development. For example:

• Webpack Dev Server: Add a proxy config to forward API requests to your backend:

  // webpack.config.js
  module.exports = {
    devServer: {
      proxy: {
        "/api": {
          target: "https://your-backend-api.com",
          changeOrigin: true
        }
      }
    }
  };
  

  Then in your code, use /api/endpoint instead of the full backend URL—Webpack will proxy the request, so the browser thinks it's same-origin.
• Nginx: Set up a local Nginx server to proxy requests between your frontend and backend.

3. Production: Same Domain or Subdomain #

Deploy your frontend and backend on the same domain (e.g., https://your-app.com for frontend, https://your-app.com/api for backend) or subdomains (e.g., https://app.your-app.com and https://api.your-app.com). For subdomains, set document.domain = "your-app.com" in your frontend code to bypass same-origin restrictions.

Corrected Code Examples #

Fixed GET Request #

<!DOCTYPE html>
<html>
<head>
<title>FETCH CUSTOMERS</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
const url = "https://your-api-url.com/customers";
const username = "your-username";
const password = "your-password";

function callAPI(){
 $.ajax({
 url: url,
 type: "GET",
 headers: {
   "Authorization": "Basic " + btoa(`${username}:${password}`)
 },
 success: function(response){
   $("#respuesta").html(JSON.stringify(response, null, 2));
 },
 error: function(jqXHR, textStatus, errorThrown) {
   $("#resultado").text(`Error: ${textStatus} - ${errorThrown}`);
 }
 });
}
callAPI();
</script>
<h1 id="resultado" style="text-align: center;"></h1>
<pre id="respuesta"></pre>
</body>
</html>

Fixed POST Request #

$("#submit1").click(function() {
  const contactEmail = $("#formContactEmail").val();
  const contactResellerId = $("#formContactResellerId").val();
  const url = "https://your-api-url.com/endpoint";
  const username = "your-username";
  const password = "your-password";

  $.ajax({
    url: url,
    type: "POST",
    contentType: "application/json", // Add if backend expects JSON
    data: JSON.stringify({ email: contactEmail, reseller_id: contactResellerId }),
    dataType: "json",
    headers: {
      "Authorization": "Basic " + btoa(`${username}:${password}`)
    }
  })
  .done(function(response) {
    successFunction(response);
    console.log("Success:", response);
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    errorFunction();
    console.error("Error Details:", { status: jqXHR.status, textStatus, errorThrown });
  });
});

function successFunction(data) {
  alert("Request succeeded!");
  // Handle response data here
}

function errorFunction() {
  alert("Request failed. Check console for details.");
}

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