启用CORS AngularJS以发送HTTP POST请求

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

我想通过将表单提交到我的服务器来发送HTTP POST请求，该服务器位于不同的域中（并使用node.js在服务器脚本中启用了cors）。

This is the script where all the Angular configurations are :

这是所有Angular配置都是的脚本：

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

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.

我正在使用AngularJS 1.2.22，正如本教程中所述（启用CORS）启用CORS，它需要在配置中手动启用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.

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

我对AngularJS很新，所以任何帮助都会非常感激，指出我犯的任何错误..谢谢！

---- EDIT : Adding server.js 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

解

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

谢谢你的答案，但我已经设法在我的服务器脚本上启用CORS（在Node上运行）然后我尝试使用它

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

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!

在我的客户端脚本上调用http请求时，它最终让我从服务器获得响应而没有CORS问题！所以，我认为这可能是标题问题..所以，谢谢你的回复！希望这将有助于将来遇到此问题的任何人！

4 个解决方案

#1

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

这就是我在快递应用程序中做CORS的方法，你必须记住OPTIONS，因为对于某些框架，有2个CORS调用，第一个是OPTIONS，用于检查可用的方法，然后是实际调用，OPTIONS只需要空答案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);

#2

I have been struggled for a long time to achieve this, finally I got a solution for this now.

我一直在努力实现这一目标，最后我现在得到了解决方案。

You can achieve same thing on server side instead of messing around client side. Here is the simple CORS Filter you need to add on server side.

您可以在服务器端实现相同的功能，而不是在客户端混乱。这是您需要在服务器端添加的简单CORS过滤器。

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

}

}

Note: If you need help with imports for above, visit the below page topic: Filter requests for CORS Filter requests for CORS

注意：如果您需要有关上述导入的帮助，请访问以下主题：筛选CORS的CORS过滤请求请求

Add this filter in your web.xml

在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

Add '<', '/>' tags in web.xml code, I had to remove to post this comment.

在web.xml代码中添加'<'，'/>'标记，我必须删除才能发布此评论。

#3

You just have to add some header properties in your server side response header.

您只需在服务器端响应头中添加一些标头属性。

Here is an example for NodeJS server

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

It will solve AngularJS cross-domain AJAX call.

它将解决AngularJS跨域AJAX调用。

I have found this solution from How to enable CORS in AngularJs

我从如何在AngularJs中启用CORS找到了这个解决方案

#4

Adding content-type header to following fixed the problem for me.

添加内容类型标题以便为我解决问题。

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