XMLHttpRequest获取的JSON无法显示，请求排查代码问题

Hey there! Let's break down common pitfalls with XMLHttpRequest that might be keeping you from seeing that JSON response. I’ll walk through the most likely issues and share a minimal working example to compare against your code.

• Forgetting to handle readyState & status properly
  A lot of folks skip verifying if readyState === 4 (request fully completed) and status === 200 (successful server response) before accessing the response data. If you try to read the response too early, it’ll be empty or undefined.

• Missing the responseType setting
  If you’re expecting JSON, adding xhr.responseType = 'json' tells the browser to automatically parse the response into a JavaScript object. Omitting this might leave you with a raw string, or cause parsing failures if the server’s Content-Type header isn’t set correctly.

• Overlooking CORS restrictions
  If you’re making a request to a different domain, subdomain, or port, the browser might block the response due to CORS rules. Check your browser’s DevTools (Network tab) for CORS error messages. If it’s your own server, you’ll need to configure the appropriate CORS headers.

• Typos in URL or HTTP method
  Double-check that your request URL is correct and you’re using the right method (GET/POST). A typo here could result in a 404 error, leaving you with no valid JSON response.

Here’s a stripped-down, functional XMLHttpRequest snippet that fetches and logs JSON:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://your-api-url-here.com/data'); // Replace with your actual URL
xhr.responseType = 'json';

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('Success! JSON response:', xhr.response);
  } else {
    console.error('Request failed with status:', xhr.status);
  }
};

xhr.onerror = function() {
  console.error('Network error occurred');
};

xhr.send();

1. Open your browser’s DevTools (F12 or Ctrl+Shift+I) and navigate to the Network tab.
2. Trigger your request and find the corresponding entry in the network list.
3. Check the Status code (should be 200 for success) and the Response tab to confirm if the server is actually returning JSON.
4. If the response exists but your code isn’t picking it up, compare your code line-by-line with the example above.

If you can share your exact minimal code, I can pinpoint the specific issue, but these steps should cover most common problems!

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