Javascript 启用CORS AngularJS发送HTTP POST请求

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

这是脚本，其中所有角度配置为：

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来解决

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

        }

    });
});

解决方案

感谢您的友好回答，但我已经成功地在服务器脚本（在节点上运行）上启用了CORS，然后我尝试使用它

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

---

在我的客户端脚本上，当调用http请求时，它最终允许我从服务器获得响应，而不会出现CORS问题！所以，我想这可能是头球问题。。所以，谢谢你们的善意回应！希望这将有助于任何人在未来有这个问题

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

200 OK

js

---

我为此奋斗了很长时间，现在终于找到了解决办法。

您可以在服务器端实现同样的功能，而不必在客户端乱搞。下面是您需要在服务器端添加的简单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() {}

}

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

在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 滤波器 过滤器名称corsFilter过滤器名称 筛选器类com.domain.corsFilter.SimpleCORSFilter筛选器类 滤波器 过滤器映射 过滤器名称corsFilter过滤器名称 url模式/*url模式 过滤器映射

---

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

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

下面是一个节点js服务器的示例

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调用

---

我从添加内容类型标题到以下内容中找到了这个解决方案，为我解决了这个问题

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

---

对于那些正在从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");
            }
        };
    }

参考：

---

我希望这有帮助。和平！：）

CORS必须由目标资源而不是AngularJS启用，并在服务器脚本中使用node.js启用CORS-您收到的错误消息表明您没有正确执行此操作。您好@Quentin，感谢您回答我的问题，我添加了服务器脚本。如果有什么问题，你介意帮忙检查一下吗？非常感谢。Did

var cors=require（'cors'）var app=express（）app。使用（cors（））

启用它。。这不是很正确吗？当您遇到CORS错误时，通常意味着您正试图从与网站托管服务器不同的服务器访问内容。如果您的数据库位于VPS中，并且您的angular内容托管在本地主机上，则您将受到CORS规则的限制。因此，您可以关闭VPS上的CORS，或者将服务器移动到与您的代码相同的位置。

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