尝试POST请求时出现CORS问题

时间:2017-01-24 05:31:44

标签: angularjs node.js cors http-post

我正在尝试从我的angularJS应用程序发送一个post请求,该应用程序在4200端口上运行,如下所示,运行在不同端口3000上的nodeJS应用程序。

AngularJS 2.0代码:

addNewItem(body:string) {
    const headers = new Headers();
    headers.append('Content-Type','application/json');
    return this.http.post('http://10.244.1.59:3000/newBinDevice',body,{
      headers: headers
    })
    .map((response : Response) => response.json());
  }

NodeJS代码

var express = require('express');

    module.exports = function(app){
        var db = require('./dbclient');
        var bodyParser = require('body-parser');
        app.use(bodyParser.json());
        app.use(bodyParser.urlencoded({extended:true}));
        db.dbconnection(null,null,null,null,'smartbin',null);
        app.post('/newItem', function(req, res, next) { 
            res.header("Access-Control-Allow-Origin", "*");
            //res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
            res.header("Access-Control-Allow-Headers", "Content-Type"); 
            res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
            console.log('body request is ' +  req.body + " after stringifying it " + JSON.stringify(req.body) + " array to string " + req.body.toString());
    }

我收到CORS问题说" Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 404."我读到的地方除了

之外无法发送数据
application/x-www-form-urlencoded
multipart/form-data
text/plain

当我尝试从AngularJS应用程序发送数据作为字符串而不是JSON对象时,我在nodejs应用程序上获取空数据。

2 个答案:

答案 0 :(得分:1)

您需要在Express应用程序中添加一些中间件才能支持CORS

您可以使用cors包:

var cors = require('cors')
...
app.use(cors());
app.use(bodyParser.json());

这将启用程序包的默认CORS配置。 documentation中详细列出了配置选项。

您的问题中的代码问题是您在POST响应中包含了CORS标头,但是它们需要在飞行前OPTIONS响应中返回。我建议使用上面提到的软件包,而不是编写自己的CORS实现。

答案 1 :(得分:0)

我是stackoverflow的新手,但在一段时间之前遇到了这个问题:

在您的应用中使用此代码。

<?php
define('API_ACCESS_KEY', ''); // API access key from Firebase Console
$registrationIds = array(''); //Token IDs of devices

$msg = array
(
    'text'  => 'Test Text',
    'title'     => 'Test Title',
);

$fields = array
(
    'to'    => $registrationIds[0],
    'notification'      => $msg,
    "priority"=> "high"
);

$headers = array
(
    'Authorization: key=' . API_ACCESS_KEY,
    'Content-Type: application/json',
);

$ch = curl_init();
curl_setopt( $ch,CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send' );
curl_setopt( $ch,CURLOPT_POST, true );
curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $fields ));
$result = curl_exec($ch );
curl_close( $ch );
echo $result;
?>

并确保在浏览器中禁用您的CORS扩展程序。