配置Northwind ODATA自定义查询时，$http.get请求报400错误求助

Hey there, let's break down why your $http.get request is returning a 400 error when the exact same URL works perfectly in the browser. This almost always boils down to differences in how the request is formatted between Angular's $http and the browser's native request handling. Here's what you need to check and fix:

1. Make sure your request headers match what OData expects #

Browsers automatically send an Accept header that tells the server what format it wants the response in, but Angular's $http might not send the exact one OData needs. Northwind's OData service prefers a specific JSON format, so add this header to your request:

$http.get(yourODataBaseUrl + '/Employees', {
  headers: {
    'Accept': 'application/json;odata.metadata=minimal' // This tells OData to send lean, usable JSON
  }
})

2. Stop manually building your URL (use params instead) #

If you're directly concatenating the search value into the URL, you're probably running into encoding issues. Browsers automatically encode special characters (like spaces, single quotes, or ampersands), but $http won't do that if you just string together the URL. Instead, use the params option in $http.get—it handles safe encoding for you:

// ❌ Don't do this (risk of malformed requests)
let badUrl = `${baseUrl}/Employees?$filter=contains(FirstName,'${val}')`;

// ✅ Do this (automatic encoding keeps your query valid)
$http.get(`${baseUrl}/Employees`, {
  params: {
    $filter: `contains(FirstName,'${val}')`
  }
})

3. Escape single quotes in your search value #

If someone searches for a name with a single quote (like O'Neil), your $filter string will break OData's syntax. OData uses two single quotes to represent one literal single quote, so you need to escape any single quotes in the input:

let escapedSearchVal = val.replace(/'/g, "''"); // Replace every ' with '' to avoid syntax errors
$http.get(`${baseUrl}/Employees`, {
  params: {
    $filter: `contains(FirstName,'${escapedSearchVal}')`
  },
  headers: {
    'Accept': 'application/json;odata.metadata=minimal'
  }
})

4. Check the actual error details #

To nail down exactly what's wrong, log the full error response in your catch block. OData services usually send back a detailed message explaining why the request was bad (like a syntax error in the $filter):

.catch(function(error) {
  console.log("Error status code:", error.status);
  console.log("OData error message:", error.data); // This will tell you exactly what's broken
});

Putting it all together in your controller #

Here's how your searchEmployees controller should look with these fixes applied:

app.controller('searchEmployees', function($scope, $http) {
  $scope.search = function(val) {
    const northwindUrl = "https://services.odata.org/V4/Northwind/Northwind.svc";
    // Escape single quotes in the search value
    let escapedVal = val.replace(/'/g, "''");
    
    $http.get(`${northwindUrl}/Employees`, {
      params: {
        $filter: `contains(FirstName,'${escapedVal}')`
      },
      headers: {
        'Accept': 'application/json;odata.metadata=minimal'
      }
    })
    .then(function(response) {
      // Store the fetched employees in scope for your view
      $scope.employees = response.data.value;
    })
    .catch(function(error) {
      console.error("Failed to load employees:", error.data);
    });
  };
});

Your directive code looks fine—it's correctly triggering the search once the input is long enough. The issue was definitely in how the $http request was being structured.

内容的提问来源于stack exchange，提问作者Lars Rødal