2

I have a Angular application in version4. and I have a node server. After posting my form, I am getting the error as I have mentioned in the title.

Failed to load http://localhost:3100/postEmployee: 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:3000' is therefore not allowed access

Code for Node Server is as follows:-

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

I could see on command prompt the server is running and listening on port 3100.

I tried something mentioned for chrome related to fixing chrome but the same is not working.

Following is the code from the service where form is being post:-

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

any pointers would help.

thanks in advance.

Sidd

2 Answers2

1

I have found that using * as the origin is problematic, so I typically set it to the specific URL based on the environment.

Your mileage may vary, but here is what I typically set when developing using Express or Nest.js for APIs:

'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

Hope that helps you out.

Brandon Taylor
  • 33,823
  • 15
  • 104
  • 144
  • Hi Brandon, Seems this worked because I can see some logging on console but I am getting different error. –  Apr 15 '18 at 01:58
  • Getting a different error is good. What error are you getting? – Brandon Taylor Apr 15 '18 at 11:49
  • Error: Can't set headers after they are sent. –  Apr 15 '18 at 19:44
  • res.writeHead(200,{ 'content-type':'text\plain' }); The above line is giving error. –  Apr 15 '18 at 19:45
  • See: https://stackoverflow.com/questions/7042340/error-cant-set-headers-after-they-are-sent-to-the-client?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – Brandon Taylor Apr 15 '18 at 21:27
0

Following is the change(return statement was missing):-

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