React Native调用带Query Param的线上API报错及实现咨询

Let's walk through exactly what's going wrong here and how to fix it—this is a super common issue when working with APIs, so don't worry!

First, Why That JSON Error Happens #

That error means your app is trying to parse HTML as JSON. When you see < at position 0, it's almost always because the server returned an error page (like a 404, 500, or misconfigured endpoint page) instead of the JSON response you expected. This is usually caused by a malformed API request.

Your API Call Has Two Key Issues #

Looking at your code, here's what's off:

1. Incorrect fetch option key: You used Params (capital P), but fetch doesn't recognize this key. Query parameters need to be appended directly to your URL, not passed as a separate option.
2. Missing required header: When sending JSON in the body, you need to tell the server what content type you're sending with Content-Type: application/json. Without this, the server might not parse your request correctly and return an error page.

Corrected API Call Code #

Here's the fixed version, structured to match how you tested in Postman:

// 1. Build the full URL with query params (matches your Postman setup)
const baseUrl = 'https://staging-somewebsite.com/index.php';
const queryParams = new URLSearchParams({
  route: 'webservices/api',
  method: 'appRegisterUser'
});
const fullUrl = `${baseUrl}?${queryParams.toString()}`;

try {
  // 2. Make the fetch request with correct headers and body
  const response = await fetch(fullUrl, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json' // Critical for JSON body
    },
    body: JSON.stringify({
      firstname: this.state.firstname,
      lastname: this.state.lastname,
      email: this.state.email,
      mobile_number: this.state.mobile_number,
      password: this.state.password,
    })
  });

  // 3. First check if the response is valid before parsing JSON
  if (!response.ok) {
    // Debug step: Log the raw response to see what the server is sending
    const errorResponse = await response.text();
    console.error('Server returned non-JSON response:', errorResponse);
    throw new Error(`Request failed with status: ${response.status}`);
  }

  // 4. Parse and use the JSON data
  const data = await response.json();
  console.log('Success:', data);
  // Handle your success logic here
} catch (error) {
  console.error('API call failed:', error.message);
  // Handle error logic here
}

Key Improvements Explained #

• URLSearchParams: This safely encodes query parameters (avoids issues with special characters) and ensures your URL matches exactly what you used in Postman.
• Content-Type Header: Tells the server "I'm sending you JSON data", so it can parse your request body correctly instead of returning an error.
• Response Validation: Checks if the server returned a 2xx status code before trying to parse JSON. If it fails, we log the raw response text so you can see exactly what the server sent (like an HTML error page) to debug further.

Quick Debugging Tip #

If you still see the error after fixing the code, copy the fullUrl value from your console and paste it into Postman—make sure it's identical to the URL you used successfully. If it works in Postman but not in React Native, double-check that your app has internet permissions (for Android, add <uses-permission android:name="android.permission.INTERNET"/> to your AndroidManifest.xml).

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