angularjs - page - Http solicita problemas de navegador múltiple

navigationend angular 4

Question

Estoy construyendo en laravel 5.1 usando angularJs .

Cuando el usuario hace clic en un botón, deseo enviar una destroy request para eliminarla de la base de datos y luego, cuando se complete, envíe una get request de obtención para obtener los nuevos datos ahora que se ha eliminado uno.

Así que adjunté mi método a un evento ng-click en un botón, esto funciona, golpea el método.

Entonces ejecuto una .destroy request . Dentro del método .then() de ese .destroy quiero llamar a otro método que tenga una .get request .

Esto funciona perfectamente en Safari, pero no funciona en Chrome o Firefox.

Here is my code for the controller , el método que se llama al hacer clic en el botón para eliminar es deleteOpportunity() :

$scope.getOpportunities = function()
{
UBOService.get()
.then(function successCallback(responsed) {
$scope.opportunities = responsed.data;
}, function errorCallback(response) {
$scope.error = response;
});
}
$scope.deleteOpportunity = function()
{
UBOService.destroy($scope.activeItem.id)
.then(function successCallback(response) {
$scope.getOpportunities();
return false;
}, function errorCallback(response) {
$scope.error = response;
});
}

Mi código de servicio:

app.service(''UBOService'', function($http) {
return {
get : function() {
return $http.get(''/api/user-booked-opportunities'');
},
destroy : function(id) {
return $http.delete(''/api/user-booked-opportunities/'' + id);
}
}
})

¿Estoy haciendo algo mal? ¿Hay algo que este olvidando? ¿Cómo interactúa Safari de manera diferente con este código que lo hace funcionar?

Answer 1

Es difícil calcular los parámetros que publicaste, pero basándote en que dices que esto funciona perfectamente en Safari, pero que no funciona en Chrome o Firefox, parece que esto podría ser un problema de CORS.

Firefox y Chrome tienen requisitos diferentes para las solicitudes de origen cruzado que Safari. ¿Su punto final Laravel api para esta acción de destroy encuentra en el mismo lugar que su aplicación Angular? ¿Qué encabezado de Access-Control-Allow-Origin está devolviendo la API?

Intente agregar algo como lo siguiente a Laravel y vea si hace que este bloque sea consistente en todos los navegadores:

App::before(function($request) {
// Enable CORS
// In production, replace * with http://yourdomain.com
header("Access-Control-Allow-Origin: *");
header(''Access-Control-Allow-Credentials: true'');
if (Request::getMethod() == "OPTIONS") {
// The client-side application can set only headers allowed in Access-Control-Allow-Headers
$headers = [
''Access-Control-Allow-Methods'' => ''POST, GET, OPTIONS, PUT, DELETE'',
''Access-Control-Allow-Headers'' => ''X-Requested-With, Content-Type, X-Auth-Token, Origin, Authorization''
];
return Response::make(''You are connected to the API'', 200, $headers);
}
});

(^ fuente)

Answer 2

Si devuelve un valor en errorCallback o errorCallback , el valor devuelto se utilizará para resolver la promise . Intente definir un $q.deferred que se resolverá en obtener $ http sucess con los datos.

$scope.deleteOpportunity = function() {
var deferred = $q.defer();
UBOService.destroy($scope.activeItem.id)
.then(function successCallback(response) {
UBOService.get().then(function(response){
$scope.opportunities = response.data;
deferred.resolve(response.data);
};
}, function errorCallback(response) {
$scope.error = response;
});
return deferred.promise;
}

Answer 3

Supongo que es un problema de CORS. Y además, este problema suele ocurrir si desacopla el lado del cliente del lado del servidor. Es necesario crear un middleware anterior para manejar dichos problemas.

namespace App/Http/Middleware;
use Closure;
class BeforeMiddleware
{
/**
* Handle an incoming request.
*
* @param /Illuminate/Http/Request $request
* @param /Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
/**
* The access control allow origin and
* allow credential is set to * and true
* because i allow request from different domains
* to hit the server
*/
header(''Access-Control-Allow-Origin: *'');
header(''Access-Control-Allow-Credentials: false'');
header(''Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS'');
header(''Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization'');
if ($request->getMethod() == "OPTIONS") {
$headers = array(
''Access-Control-Allow-Methods''=> ''POST, GET, OPTIONS, PUT, DELETE'',
''Access-Control-Allow-Headers''=> ''X-Requested-With, content-type'',);
return Response::make('''', 200, $headers);
}
return $next($request);
}
}

Y en el lado angular de las cosas agrega este bloque de configuración.

app.config([''$httpProvider'', function ($httpProvider) {
$httpProvider.defaults.useXDomain = false;
$httpProvider.defaults.withCredentials = false;
delete $httpProvider.defaults.headers.common[''X-Requested-With''];
}]);