問題描述

我想通過向位于不同域的服務器提交表單來發(fā)送 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();
            });

        }

    });
});

解決方案

感謝您的友好回答，但我已經(jīng)設法在我的服務器腳本(在 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' }

在調(diào)用 http 請求時在我的客戶端腳本上，然后它終于讓我從服務器獲得響應而不會出現(xiàn) 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 應用程序中執(zhí)行 CORS 的方式，您必須記住 OPTIONS，因為對于某些框架，有 2 個 CORS 調(diào)用，第一個是 OPTIONS，它檢查什么方法可用，然后有實際調(diào)用，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 以發(fā)送 HTTP POST 請求的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！