Activer CORS AngularJS pour envoyer HTTP POST demande
Je souhaite envoyer une demande HTTP POST en soumettant un formulaire à mon serveur, qui dans un domaine différent (et activé dans le script du serveur à l'aide de node.js).
C'est le script où toutes les configurations angulaires sont:
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");
}
});
}
}); ...
J'utilise AngularJS 1.2.22 et comme il est indiqué dans ce tutoriel ( Activer CORS ) pour activer CORS, il doit activer CORS manuellement dans la configuration. Mais ça ne marche toujours pas. Voici ce que j'ai reçu de la console du navigateur.
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.
AngularJS étant nouveau pour moi, toute aide serait vraiment utile pour signaler les erreurs que j'ai commises. Merci!
---- EDIT: Ajout du 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();
});
}
});
});
SOLUTION
Merci pour les bonnes réponses, mais j’ai réussi à activer CORS sur mon script de serveur (exécuté sur Node), puis j’ai essayé de l’utiliser.
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
sur mon script côté client lorsque la requête http est appelée, cela me permet enfin de recevoir une réponse du serveur sans avoir le problème CORS! Donc, j'ai pensé que cela pourrait être le problème de l'en-tête. Alors, merci pour vos bonnes réponses! J'espère que cela aiderait quiconque ayant ce problème à l'avenir!
C’est comme cela que je fais dans CORS dans les applications express, vous devez vous rappeler d’OPTIONS car pour certains frameworks, il existe deux appels pour CORS, le premier est OPTIONS qui vérifie les méthodes disponibles, puis il existe un appel, OPTIONS requiert une réponse vide 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);
Cela fait longtemps que je lutte pour y parvenir, j'ai enfin une solution pour cela.
Vous pouvez obtenir la même chose côté serveur au lieu de jouer avec le côté client. Voici le filtre CORS simple que vous devez ajouter côté serveur.
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() {}
}
Remarque: si vous avez besoin d'aide pour importer les éléments ci-dessus, visitez le sujet de la page ci-dessous: Filtrer les demandes pour CORSFiltrer les demandes pour CORS
Ajouter ce filtre dans votre web.xml
filtre nom-filtre corsFilter nom-filtre classe de filtrage com.domain.corsFilter.SimpleCORSFilter classe de filtrage filter filter-mapping nom-filtre corsFilter nom-filtre url-pattern/* url-pattern filter-mapping
Ajouter les balises '<', '/>' dans le code web.xml, j'ai dû supprimer pour poster ce commentaire.
L'ajout d'en-tête de type de contenu à ce qui suit a résolu le problème pour moi.
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }