wake-up-neo.com

Aktivieren Sie CORS AngularJS zum Senden von HTTP POST anfordern

Ich möchte eine HTTP POST -Anforderung senden, indem ich ein Formular an meinen Server schicke, das sich in einer anderen Domäne befindet (und die cors im Serverskript mithilfe von node.js aktiviert hat). 

Dies ist das Skript, in dem sich alle Angular-Konfigurationen befinden:

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");
        }
      });
  }
}); ...

Ich verwende AngularJS 1.2.22. Wie in diesem Lernprogramm angegeben ( CORS aktivieren ), um CORS zu aktivieren, muss CORS manuell in der Konfiguration aktiviert werden. Aber es funktioniert immer noch nicht. Hier ist, was ich von der Browser-Konsole bekam.

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.

Ich bin ziemlich neu bei AngularJS, daher würde ich mich über jede Hilfe sehr freuen, wenn ich auf Fehler aufmerksam mache. Danke! 

---- EDIT: Server.js-Skript hinzufügen ----

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();
            });

        }

    });
});

LÖSUNG

Vielen Dank für die freundlichen Antworten, aber ich habe es geschafft, CORS auf meinem Serverskript (das auf Node läuft) zu aktivieren. Dann habe ich versucht, dies zu verwenden

headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

auf meinem clientseitigen Skript, wenn die http-Anfrage aufgerufen wird, dann lassen Sie mich endlich eine Antwort vom Server erhalten, ohne das CORS-Problem zu haben! Also dachte ich, es könnte das Header-Problem sein. Danke für die freundlichen Antworten! Ich hoffe, das würde jedem helfen, der dieses Problem in der Zukunft hat!

16
prameshvari

So mache ich CORS in Express-Anwendungen, man muss sich an OPTIONS erinnern, denn für einige Frameworks gibt es 2 Aufrufe für CORS, einer ist OPTIONS, der prüft, welche Methoden verfügbar sind, und dann gibt es einen tatsächlichen Aufruf, OPTIONS erfordern nur eine leere Antwort 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);
11
maurycy

Ich habe lange Zeit darum gekämpft, endlich habe ich jetzt eine Lösung dafür bekommen.

Sie können dasselbe auf dem Server erreichen, anstatt auf der Clientseite herumzuspielen. Hier ist der einfache CORS-Filter, den Sie auf dem Server hinzufügen müssen.

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() {}

}

Hinweis: Wenn Sie Hilfe beim Importieren für oben benötigen, besuchen Sie das folgende Thema: Anforderungen für CORS filternAnforderungen für CORS filtern

Fügen Sie diesen Filter in Ihre web.xml ein

filter
 filtername corsFilter filtername 
 Filterklasse com.domain.corsFilter.SimpleCORSFilter Filterklasse 
 Filter 
 Filterzuordnung 
 filtername corsFilter filtername 
 URL-Muster/* URL-Muster 
 Filter-Mapping

Fügen Sie '<', '/>' - Tags in web.xml-Code hinzu, den ich entfernen musste, um diesen Kommentar zu posten.

1
srinivas

Das Hinzufügen des Kopfs mit dem Inhaltstyp hat das Problem für mich behoben.

headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
0