当前位置: 首页 > 面试题库 >

AngularJS POST失败:飞行前响应具有无效的HTTP状态代码404

蓬宾白
2023-03-14
问题内容

我知道有很多这样的问题,但是我所见的问题都没有解决。我已经使用了至少3个微框架。所有这些都无法执行简单的POST,它应该将数据返回:

angularJS客户端:

var app = angular.module('client', []);

app.config(function ($httpProvider) {
  //uncommenting the following line makes GET requests fail as well
  //$httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

app.controller('MainCtrl', function($scope, $http) {
  var baseUrl = 'http://localhost:8080/server.php'

  $scope.response = 'Response goes here';

  $scope.sendRequest = function() {
    $http({
      method: 'GET',
      url: baseUrl + '/get'
    }).then(function successCallback(response) {
      $scope.response = response.data.response;
    }, function errorCallback(response) { });
  };

  $scope.sendPost = function() {
    $http.post(baseUrl + '/post', {post: 'data from client', withCredentials: true })
    .success(function(data, status, headers, config) {
      console.log(status);
    })
    .error(function(data, status, headers, config) {
      console.log('FAILED');
    });
  }
});

SlimPHP服务器:

<?php
    require 'vendor/autoload.php';

    $app = new \Slim\Slim();
    $app->response()->headers->set('Access-Control-Allow-Headers', 'Content-Type');
    $app->response()->headers->set('Content-Type', 'application/json');
    $app->response()->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    $app->response()->headers->set('Access-Control-Allow-Origin', '*');

    $array = ["response" => "Hello World!"];

    $app->get('/get', function() use($array) {
        $app = \Slim\Slim::getInstance();

        $app->response->setStatus(200);
        echo json_encode($array);
    });

    $app->post('/post', function() {
        $app = \Slim\Slim::getInstance();

        $allPostVars = $app->request->post();
        $dataFromClient = $allPostVars['post'];
        $app->response->setStatus(200);
        echo json_encode($dataFromClient);
    });

    $app->run();

我已启用CORS,并且GET请求有效。html使用服务器发送的JSON内容进行更新。但是我得到了

XMLHttpRequest无法加载 http:// localhost:8080 / server.php /
post
。飞行前的响应具有无效的HTTP状态代码404

每次我尝试使用POST时。为什么?

编辑:根据Pointy的要求 req /
res标头


问题答案:

好的,这就是我的解决方法。这都与CORS政策有关。在发布POST请求之前,Chrome正在执行预检OPTIONS请求,服务器应在实际请求之前对其进行处理和确认。现在,这真的不是我想要的那样简单的服务器。因此,重置标头客户端可以防止预检:

app.config(function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
});

浏览器现在将直接发送POST。希望这对很多人有帮助…我的真正问题是对CORS的了解不足。

链接到一个很好的解释:http :
//www.html5rocks.com/en/tutorials/cors/



 类似资料:
  • 我知道有很多这样的问题,但我见过没有一个能解决我的问题。我已经使用了至少3个微框架。它们在执行一个简单的POST时都失败了,该POST应该返回数据: angularJS客户端: SlimPHP服务器: 我已经启用了CORS,并获得了工作请求。html使用服务器发送的JSON内容进行更新。然而我得到了一个 每次我试着用POST。为什么?

  • 我正在尝试使用Ajax进行REST调用(POST)。这是我的AJAX代码 最初,我得到了这个错误:XMLHttpRequest无法加载http://localhost:port/service/myservice。对preflight请求的响应未通过访问控制检查:请求的资源上没有“access-control-allow-origin”标头。因此不允许访问源“null”。响应的HTTP状态代码为4

  • 我使用作为服务器端的Spring-boot并提供一个虚拟服务进行测试 其中我的serviceCaller.java=

  • 我知道这里已经有很多相同的解决问题, 但不幸的是,它们都没有帮助我:-( 这里是我的问题: 我尝试从本地主机连接到服务器上的REST服务。使用FF REST插件可以正常工作,但我的应用程序会导致以下错误: 选项 http://.../my_REST_Service/ 401 (未经授权) XMLHttpRequest 无法加载 http://.../my_REST_Service/。 印前检查的响

  • 所有人。我是Angular 2和Spring框架的新手。我正在尝试一个带有授权头(基本身份验证)的简单get请求。 我使用的是Spring Boot(1.2.6.Release),这也可能是相关的。我的CORS配置如下所示。 帮帮我,我不知道我错过了什么...我已经查了很多帖子,但都没找到。

  • 问题内容: 大家。我是Angular 2和Spring框架的新手。我正在尝试使用授权标头(基本auth)进行简单的get请求。 我正在使用Spring Boot(1.2.6.RELEASE),这也可能是相关的。我的CORS配置如下所示。 这是客户端的外观 我不断得到: XMLHttpRequest无法加载 http:// localhost:8080 / api / login?username