AngularJS POST请求带文件名URL报404，无文件名时正常，求技术解答

Let's break down why your POST request works with http://127.0.0.1/social/ but fails with http://127.0.0.1/social/index.php, and how to fix it:

Problem 1: Invalid URL Construction #

When you use window.location.href + "php/savefetch.funct.php", you're creating a broken URL when on index.php:

• For http://127.0.0.1/social/, the result is http://127.0.0.1/social/php/savefetch.funct.php (correct)
• For http://127.0.0.1/social/index.php, the result is http://127.0.0.1/social/index.phpphp/savefetch.funct.php (invalid, hence the 404)

Solution: Use a relative path instead of appending to window.location.href:

url: "php/savefetch.funct.php"

This resolves to the correct path regardless of whether you're on the root /social/ or /social/index.php.

Problem 2: Mismatched Content-Type and Data Format #

Your Angular code sets Content-Type: application/x-www-form-urlencoded but sends JSON data. While php://input can still read raw JSON, aligning the header with the data format avoids potential issues.

Solution: Remove the custom header (Angular defaults to application/json for object data) or explicitly set it:

headers: { 'Content-Type': 'application/json' }

This matches the JSON data your PHP code expects with json_decode.

Problem 3: Default Form Submission Interferes with AJAX #

The form's default submission (full page reload) can cancel your AJAX request or hide its results.

Solution: Use ng-submit on the form to automatically prevent default behavior:

1. Update your form tag:

<form ng-submit="loginFunction()">

2. Remove ng-click from the submit button:

<input type="submit" class="btn btn-success btn-lg btn-block" name="loginBtn" value="Continue" />

Corrected Code Examples #

AngularJS Controller (js/jsfile.js) #

var app = angular.module('socialApp',[]);
app.controller('loginController',['$scope','$http','$window', function($scope,$http,$window){
    $scope.loginFunction = function(){
        var what = "login";
        var username = $scope.Username;
        var password = $scope.Password;
        
        var request = $http({
            method: "post",
            url: "php/savefetch.funct.php",
            data: { what: what, username: username, password: password },
            headers: { 'Content-Type': 'application/json' }
        });
        
        request.success(function (data) {
            alert(data);
        });
        
        // Add error handling for debugging
        request.error(function(error, status) {
            console.error("Request failed:", error, "Status:", status);
            alert("Failed to login: " + status + " - " + JSON.stringify(error));
        });
    };
}]);

HTML Form (index.php) #

<form ng-submit="loginFunction()">
    <div class="modal-content">
        <div class="modal-header text-center">
            <h3 class="modal-title">Login</h3>
        </div>
        <div class="modal-body">
            <div class="form-group text-center">
                <h5 style="color: red;" id="loginError"></h5>
            </div>
            <div class="form-group">
                <input type="text" ng-model="Username" class="form-control input input-lg" name="username" placeholder="Email / Username" required="required" />
            </div>
            <div class="form-group">
                <input type="password" ng-model="Password" class="form-control input input-lg" name="password" placeholder="Password" required="required" />
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-success btn-lg btn-block" name="loginBtn" value="Continue" />
            </div>
            <div class="form-group">
                <h5><a href="#forgotPasswordModal" data-toggle="modal" data-dismiss="modal">Forgot password</a></h5>
            </div>
        </div>
        <div class="modal-footer text-center">
            <div class="form-group text-center">
                <h5>Not a member yet?<a href="#signUpModal" data-toggle="modal" data-dismiss="modal"> Join now.</a></h5>
            </div>
        </div>
    </div>
</form>

Additional Tips #

• Verify your PHP file php/savefetch.funct.php has correct permissions and is in the right directory.
• Use browser dev tools (Network tab) to inspect the request URL and payload to confirm everything is sent correctly.

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