web-dev-qa-db-ja.com

CORS AngularJSを有効にしてHTTP POSTリクエストを送信

HTTP POST別のドメイン（node.jsを使用するサーバースクリプトで有効なcors）にあるサーバーにフォームを送信することにより、POST $ ===リクエストを送信したい。

これは、すべての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を使用していますが、このチュートリアルで説明したように（ Enable 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.

私は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();
            });

        }

    });
});

[〜＃〜] solution [〜＃〜]

親切な回答をありがとうございますが、サーバースクリプト（ノードで実行）でCORSを有効にした後、これを使用しようとしました。

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

hTTPリクエストが呼び出されたときにクライアント側のスクリプトで、CORSの問題なしにサーバーから応答を取得することができました！だから、それはヘッダーの問題かもしれないと思った..だから、親切な応答をありがとう！これが将来この問題を抱えている人の助けになることを願っています！

javascriptangularjshttp-postcorshttprequest
17
prameshvari

私はこれを達成するために長い間苦労してきましたが、ついにこれに対する解決策を手に入れました。

クライアント側をいじるのではなく、サーバー側で同じことを実現できます。サーバー側に追加する必要がある簡単な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コードに「<」、「/>」タグを追加します。このコメントを投稿するには削除する必要がありました。

1
srinivas

Content-typeヘッダーを以下に追加すると、問題が修正されました。

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