Angular4 和节点服务器 - 对预检请求的响应未通过访问控制答案

【问题标题】：Angular4 and Node Server - Response to preflight request doesn't pass access controlAngular4 和节点服务器 - 对预检请求的响应未通过访问控制
【发布时间】：2018-04-19 05:47:02
【问题描述】：

我有一个版本 4 的 Angular 应用程序。我有一个节点服务器。发布表单后，我收到了标题中提到的错误。

无法加载http://localhost:3100/postEmployee：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:3000' 因此不允许访问

Node Server 的代码如下：-

var http=require('http');
var formidable=require('formidable');
var util=require('util');

var server=http.createServer(function(req,res){
    res.setHeader('Access-Control-Allow-Origion','*');
    res.setHeader('Access-Control-Allow-Headers',
    'Origion, X-Requested-With,Content-Type,Accept');

    if(req.method.toLowerCase( )== 'post')
    {
        processForm(req,res);
    }
    res.end();
});

function processForm(req,res){
    console.log('Inside processForm');
var form=new formidable.IncomingForm();
form.parse(req,function(err,fields){

    res.writeHead(200,{
        'content-type':'text\plain'
    });

    res.end(unil,inspect({
        fields:fields
    }));

    console.log('posted fields\n');
    console.log(util.inspect({
            fields:fields
    }));

})

}

var port=3100;
server.listen(port);
console.log("server listening on port " + port);

我可以在命令提示符下看到服务器正在运行并正在侦听端口 3100。

我尝试了一些与修复 chrome 相关的 chrome，但同样不起作用。

以下是发布表单的服务中的代码：-

postEmployeeForm(employee : Employee) : Observable<any>{
    let body=JSON.stringify(employee);
    let headers=new Headers({'Content-Type':'application/json'});

    let options= new RequestOptions({headers:headers});

    return this.http.post("http://localhost:3100/postEmployee"
    ,body,options)
                .map(this.extractData)
                .catch(this.handleError);
    //console.log('posting employee : ' + JSON.stringify(employee));
}

任何指针都会有所帮助。

提前致谢。

西德

【问题讨论】：

您在几个地方有错字：Access-Control-Allow-Origion 应该是 Access-Control-Allow-Origin。

标签： angular

【解决方案1】：

我发现使用*作为来源是有问题的，所以我一般会根据环境设置成具体的URL。

您的里程可能会有所不同，但这是我在使用 Express 或 Nest.js 开发 API 时通常设置的内容：

'Access-Control-Allow-Origin', '[your-exact-origin-url]'
'Access-Control-Allow-Methods', 'DELETE, GET, POST, PUT, OPTIONS'
'Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
'Access-Control-Allow-Credentials', true

希望对你有所帮助。

【讨论】：

嗨，布兰登，这似乎可行，因为我可以在控制台上看到一些日志记录，但出现不同的错误。
得到一个不同的错误是好的。你遇到了什么错误？
错误：发送后无法设置标头。
res.writeHead(200,{ 'content-type':'text\plain' });上面的行给出了错误。
见：stackoverflow.com/questions/7042340/…

【解决方案2】：

以下是更改（缺少返回语句）：-

var http=require('http');
var formidable=require('formidable');
var util=require('util');

var server=http.createServer(function(req,res){
    res.setHeader('Access-Control-Allow-Origion','*');
    res.setHeader('Access-Control-Allow-Headers',
    'Origion, X-Requested-With,Content-Type,Accept');

    if(req.method.toLowerCase( )== 'post')
    {
        processForm(req,res);
***return;***
    }
    res.end();
});

【讨论】：