CODEWITHSUNDEEP
javascriptajaxnode.jsexpressxmlhttprequest
Masnad Nihit
Masnad Nihit

Reputation: 1996

Cors not working for XMLhttprequest node/express

I know this feels like a repeating question but I have tried all possible way for my ajax request to work but It just is not being able to. Here is the ajax code. The ajax call is fired from a js file in index.html

self.getJSON = () => {
      $.ajax({
          type: 'POST',
          url: 'https://iot-backend-metropolia.herokuapp.com/api/user' ,
          contentType: 'application/json; charset=utf-8',
          dataType: "json",
      })
      .done(function(result) {
          console.log(result);
      })
      .fail(function(xhr, status, error) {
          alert(error);
      })
      .always(function(data){
      });
  }

I tried 2 methods. 

1) npm install cors
app.use(cors())
2) // Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

Both the methods failed, I searched all over the net but everyone answer was the same, and now I am confused on what is going on with my server.

I will post my server.js file if someone can figure out whats wrong would be of great help.

const path = require('path');
const http = require('http');
const express = require('express');
const cors = require('cors');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');

const publicPath = path.join(__dirname, '../public');
const port = process.env.PORT || 3000;
var app = express();

app.use(cors())

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(express.static(publicPath));

app.listen(port, () => {
  console.log(`Server is up on ${port}`);
});

Error message is provided below. XMLHttpRequest cannot load https://iot-backend-metropolia.herokuapp.com/api/user. 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.

Upvotes: 6

Views: 3182

Answers (1)

Julien
Julien

Reputation: 1238

you can add this:

app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

    if (req.method == 'OPTIONS') {
        res.send(200);
    } else {
        next();
    }
});

Upvotes: 1

Related Questions