使AngularJS启用CORS以发送HTTP POST请求

18

我希望通过提交表单向位于不同域的服务器发送HTTP POST请求(使用Node.js在服务器脚本中启用了CORS)。

以下是包含所有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");
        }
      });
  }
}); ...

我正在使用AngularJS 1.2.22,根据这个教程(启用CORS),为了启用CORS,需要在配置中手动启用CORS。但它仍然无效。以下是我从浏览器控制台获得的内容。

跨源请求被阻止:同源策略禁止读取远程资源 http://localhost:8183/user/register。可以通过将资源移动到相同的域或启用CORS来解决此问题。

我对AngularJS非常陌生,希望能得到任何帮助以指出我可能犯的错误...谢谢!

---- 编辑:添加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,然后我尝试使用以下方法:

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

当我的客户端脚本调用HTTP请求时,最终让我能够从服务器获取响应而没有CORS问题!因此,我认为这可能是头部问题..感谢您的友善回复!希望这可以帮助未来遇到此问题的任何人!


1
CORS必须由目标资源启用,而不是AngularJS。 - Arun P Johny
并且在使用Node.js编写的服务器脚本中启用了CORS——您收到的错误消息表明您没有正确地执行这一步骤。 - Quentin
嗨@Quentin,感谢您回答我的问题,我已经添加了服务器脚本。您介意帮忙检查一下是否有任何错误吗?谢谢! - prameshvari
使用 var cors = require('cors')var app = express(),然后调用 app.use(cors()) 来启用它,这样不对吗? - prameshvari
当您遇到CORS错误时,通常意味着您正在尝试访问与托管网站不同的服务器上的内容。如果您的数据库位于VPS中,而您的Angular内容托管在本地主机上,则会受到CORS规则的限制。因此,您要么在您的VPS上关闭CORS,要么将服务器移动到与您的Angular代码相同的位置。 - Bwaxxlo
显示剩余2条评论
5个回答

12

这就是在express应用程序中实现CORS的方法,你需要记住OPTIONS,因为对于某些框架,CORS有两个调用,第一个是OPTIONS,它检查可用的方法,然后才是实际的调用,OPTIONS只需要空答案200 OK

js(JavaScript)

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

1
我已经为实现这个问题奋斗了很长时间,现在终于找到了解决方案。
您可以通过在服务器端进行操作而不是在客户端上对其进行操作来实现相同的功能。以下是您需要在服务器端添加的简单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() {}

}

注意:如果您需要有关上述导入的帮助,请访问以下主题页面:CORS请求过滤器CORS请求过滤器

在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

在web.xml代码中添加'<','/>'标签,我不得不删除才能发布此评论。


0

在我的情况下,将content-type头添加到以下内容解决了问题。

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

0
对于那些正在寻找从Angular JS发出CORS请求的用户,首先不要在JS配置中添加不必要的头部信息花费太多时间。您无需更改前端任何内容,只需在控制器或方法级别添加以下注释即可。
@CrossOrigin

如果您想为任何特定的URL启用CORS,则使用以下注释:
@CrossOrigin(origins = "http://localhost:9000")

以上解决方案是针对控制器方法CORS配置的。您还可以通过在应用程序类中添加以下内容来进行全局CORS配置。

public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:9000");
            }
        };
    }

参考:https://spring.io/guides/gs/rest-service-cors/

希望这能帮到你。祝平安!:)


-1

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

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

它将解决AngularJS跨域AJAX调用问题。

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接