启用 CORS AngularJS 以发送 HTTP POST 请求

Enable CORS AngularJS to send HTTP POST request(启用 CORS AngularJS 以发送 HTTP POST 请求)

问题描述

我想通过向位于不同域的服务器提交表单来发送 HTTP POST 请求(使用 node.js 在服务器脚本中启用 cors).

I want to send an HTTP POST request by submitting a form to my server, which is located at a different domain (enabled cors in the server script using node.js).

这是所有 Angular 配置所在的脚本:

This is the script where all the Angular configurations are :

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

我正在使用 AngularJS 1.2.22，正如本教程中所述(启用 CORS) 启用 CORS，需要在配置中手动启用 CORS.但它仍然无法正常工作.这是我从浏览器控制台得到的.

I'm using AngularJS 1.2.22 and as it stated in this tutorial (Enable CORS) to enable CORS, it needs to enable CORS manually in the config. But it's still not working. Here is what I got from the browser console.

跨源请求被阻止:同源策略不允许在 http://localhost:8183 读取远程资源/用户/注册.这可以通过将资源移动到同一域或启用 CORS 来解决.

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 还是很陌生，所以如果能指出我犯的任何错误，我将不胜感激.谢谢！

I'm quite new to AngularJS so any help would really be appreciated to point out any mistakes I made.. Thank you!

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

        }

    });
});

解决方案

感谢您的友好回答，但我已经设法在我的服务器脚本(在 Node 上运行)上启用了 CORS，然后我尝试使用它

Thank you for the kind answers, but I've managed to enable CORS on my server script (running on Node) then I tried to use this

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

在调用 http 请求时在我的客户端脚本上，然后它终于让我从服务器获得响应而不会出现 CORS 问题！所以，我认为这可能是标题问题.. 所以，感谢您的友好回复！希望这对以后遇到此问题的人有所帮助！

on my client-side script when the http request is called, then it finally let me to get response from the server without having the CORS problem! So, I thought it might be the header problem .. So, thank you for kind responses! Hope this would help anyone having this problem in the future!

推荐答案

这就是我在 express 应用程序中执行 CORS 的方式，您必须记住 OPTIONS，因为对于某些框架，有 2 个 CORS 调用，第一个是 OPTIONS，它检查什么方法可用，然后有实际调用，OPTIONS 只需要空答案 200 OK

That's how I do CORS in express applications, you have to remember about OPTIONS because for some frameworks there are 2 calls for CORS, first one is OPTIONS which checks what methods are available and then there is actual call, OPTIONS require just empty answer 200 OK

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

这篇关于启用 CORS AngularJS 以发送 HTTP POST 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！