javascript - falta - Habilite CORS AngularJS para enviar solicitudes HTTP POST
falta la cabecera cors access control allow origin angular (4)
Deseo enviar la solicitud HTTP POST enviando formulario a mi servidor, que en un dominio diferente (y cors habilitados en la secuencia de comandos del servidor usando node.js).
Esta es la secuencia de comandos donde están todas las configuraciones angulares:
var myApp = angular.module(''myApp'', [''ngRoute'']);
myApp.config(function($routeProvider, $locationProvider, $httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common[''X-Requested-With''];
$routeProvider
.when(''/'', {
controller: ''RouteCtrl'',
templateUrl: ''views/home_views.html''
})
.when(''/login'', {
controller: ''RouteCtrl'',
templateUrl: ''views/login_views.html''
})
.when(''/register'', {
controller: ''RouteCtrl'',
templateUrl: ''views/register_views.html''
})
});
myApp.controller("UserController", function($scope, $http) {
$scope.formData = {};
$scope.clickMe = function() {
console.log("Yay");
$http({
method: ''POST'',
url: ''http://localhost:8183/user/register'',
data: $.param($scope.formData),
})
.success(function(data) {
console.log(data);
if(!data.success) {
console.log("error here");
} else {
console.log("error there");
}
});
}
}); ...
Estoy usando AngularJS 1.2.22 y como se indica en este tutorial ( Habilitar CORS ) para habilitar CORS, necesita habilitar CORS manualmente en la configuración. Pero todavía no está funcionando. Esto es lo que obtuve de la consola del navegador.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8183/user/register. This can be fixed by moving the resource to the same domain or enabling CORS.
Soy bastante nuevo en AngularJS por lo que cualquier ayuda sería realmente apreciada para señalar cualquier error que haya cometido ... ¡Gracias!
---- EDITAR: Añadiendo el script server.js ----
var express = require(''express''),
app = express(),
bodyParser = require(''body-parser''),
expressValidator = require(''express-validator''),
mysql = require(''mysql''),
crypto = require(''crypto''),
cors = require(''cors''),
uuid = require(''node-uuid'');
var connectionpool = mysql.createPool({
connectionLimit: 1000,
host: ''localhost'',
user: ''root'',
password: '''',
database: ''cloudvm''
});
app.listen(8183);
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.use(expressValidator());
app.use(cors());
var user_router = express.Router();
var user_list = user_router.route(''/list'');
var user_register = user_router.route(''/register'');
var user_login = user_router.route(''/login'');
app.use(''/user'', user_router);
user_register.post(function(req, res, next) {
var errors = req.validationErrors();
if (errors) {
res.status(200);
res.send(errors);
console.log(errors);
return;
}
var data = {
name_user: req.body.name,
email_user: req.body.email,
password_user: req.body.password,
no_telp_user: req.body.no_telp,
company_name_user: req.body.company_name,
address_user: req.body.address,
name_cc_user: req.body.name_cc,
address_cc_user: req.body.address_cc,
no_cc_user: req.body.no_cc,
no_vcv_user: req.body.no_vcv,
expire_month_cc_user: req.body.expire_month,
expire_year_cc_user: req.body.expire_year
};
connectionpool.getConnection(function(err, connection) {
if (err) {
console.error(''CONNECTION ERROR:'', err);
res.statusCode = 503;
res.send({
result: ''error'',
err: err.code
});
} else {
var sql = ''INSERT INTO user SET ?'';
console.log(sql)
connection.query(sql, data, function(err, rows, fields) {
if (err) {
console.error(err);
res.statuscode = 500;
res.send({
result: ''error'',
err: err.code
});
}
res.send([{
msg: "registration succeed"
}]);
connection.release();
});
}
});
});
SOLUCIÓN
Gracias por las amables respuestas, pero he logrado habilitar CORS en mi secuencia de comandos del servidor (ejecutándose en Node) y luego intenté usar esto
headers: { ''Content-Type'': ''application/x-www-form-urlencoded'' }
en mi script del lado del cliente cuando se llama a la solicitud http, ¡finalmente me permitió obtener la respuesta del servidor sin tener el problema CORS! Entonces, pensé que podría ser el problema principal ... ¡Así que gracias por las amables respuestas! Espero que esto ayude a cualquiera que tenga este problema en el futuro.
Así es como hago CORS en aplicaciones express, debe recordar acerca de OPTIONS porque para algunos frameworks hay 2 llamadas para CORS, la primera es OPTIONS que verifica qué métodos están disponibles y luego hay una llamada real, OPTIONS requiere solo la respuesta vacía 200 OK
js
allowCrossDomain = function(req, res, next) {
res.header(''Access-Control-Allow-Origin'', ''*'');
res.header(''Access-Control-Allow-Methods'', ''GET,PUT,POST,DELETE,OPTIONS'');
res.header(''Access-Control-Allow-Headers'', ''Content-Type, Authorization, Content-Length, X-Requested-With'');
if (''OPTIONS'' === req.method) {
res.send(200);
} else {
next();
}
};
app.use(allowCrossDomain);
He tenido problemas durante mucho tiempo para lograr esto, finalmente obtuve una solución para esto ahora.
Puede lograr lo mismo en el lado del servidor en lugar de meterse en el lado del cliente. Aquí está el filtro CORS simple que necesita agregar en el lado del servidor.
package com.domain.corsFilter;
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
Nota: Si necesita ayuda con las importaciones para arriba, visite el tema de la página a continuación: Solicitudes de filtro para las solicitudes de filtro CORS para CORS
Agregue este filtro en su web.xml
filter filter-name corsFilter filter-name filter-class com.domain.corsFilter.SimpleCORSFilter filter-class filter filter-mapping filter-name corsFilter filter-name url-pattern /* url-pattern filter-mapping
Agregue las etiquetas ''<'', ''/>'' en el código web.xml, tuve que eliminar para publicar este comentario.
Solo tiene que agregar algunas propiedades de encabezado en su encabezado de respuesta del lado del servidor.
Aquí hay un ejemplo para el servidor NodeJS
app.all("/api/*", function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
return next();
});
Resolverá la llamada AJAX de dominio cruzado de AngularJS.
Encontré esta solución de Cómo habilitar CORS en AngularJs
Agregar un encabezado de tipo de contenido a los siguientes me arregló el problema.
[Editar] La forma correcta es
headers: { ''Content-Type'': ''application/x-www-form-urlencoded'' }