I am trying to build an application with angularjs as front end and rest api using express js. I built both the projects using yeoman and my angular app is running on localhost:9000 and my express app is running on localhost:3000. When i try to talk to express js app from angular, I am getting a cross domain request, is there any way to fix this.
app.js in Express App
var routes = require('./routes/signup')(app); //This is the extra line
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "{GRUNT_SERVER}");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
res.header("Access-Control-Allow-Credentials", "true");
next();
});
app.get('/', function(req, res) {
res.json({ message: 'hooray! welcome to our api!' });
});
app.js in angularjs app
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.withCredentials = true;
Error
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:9000' is therefore not allowed access.
The response had HTTP status code 409.
EDIT
Here's the code that I added to my app.js file:
// allow CORS:
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
next();
});
This also throws the same error ("No 'Access-Control-Allow-Origin' header is present on the requested resource.") as before.
EDIT
After using
var express = require('express')
, cors = require('cors')
, app = express();
app.use(cors());
This is throwing POST localhost:3000/signup 409 (Conflict)
Use npm cors - https://github.com/expressjs/cors to allow cors request.
var express = require('express')
, cors = require('cors')
, app = express();
app.use(cors());
app.get('/', function(req, res) {
res.json({ message: 'hooray! welcome to our api!' });
});
app.listen(3000);
Related
My reactjs website runs on https and my NodeJS server is https but I got error calling the NodeJS api from reactjs website. Both ReactJS website and NodeJS api deployed on the same linux VPS server, my database is on a remote but the connection is fine as I am not getting database connection error but i got cors errors like below:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:8184/api/v1/signin. (Reason: CORS request did not succeed). Status code: (null).
My NodeJS that started the https server enable cors and it allowed cross origin. See my NodeJS
const cors = require('cors')({
origin: 'https://mydomaindotcom'
});
const allowCrossDomain = function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'POST, GET, PUT,PATCH, DELETE, OPTIONS, ');
res.header('Access-Control-Allow-Credentials', false);
res.header('Access-Control-Max-Age', '86400');
res.header('Access-Control-Allow-Headers', 'Authorization, X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
next();
};
app.use(allowCrossDomain);
// Error logger
app.use(logger('dev', {
skip: function (req, res) { return res.statusCode < 400 },
stream: fileWriter
}))
app.use(logger('dev'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(cors);
app.use(fileUpload());
app.use("/api/v1", routes);
In my ReactJS package.json file i have my domain as homepage like below:
"homepage": "https://mydomain",
"Hostname": "https://mydomain",
Please help on this cors errors, it has taken enough sweat on my face.
Hy, I try to get some data from a nodeJs API. I use react for frontend. I make my node API, I test with Postman and it work fine. When I use axios for get my data from the server I get a cors Error.
This is my axios call from react:
async function getMagazin(){
return (await axios.get(URL)).data;
}
And this is my node Js API:
import express from 'express';
import bodyParser from 'body-parser';
import db from './dbConfig.js';
import Magazin from './entities/Magazin.js';
import cors from 'cors';
let app = express();
let router = express.Router();
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use('/api', router);
app.use(cors());
app.use(function(req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
if ('OPTIONS' == req.method) {
res.sendStatus(200);
}
else {
next();
}});
async function getMagazin(){
return await Magazin.findAll();
}
router.route('/magazin').get(async (req, res) => {
res.json(await getMagazin());
})
let port = process.env.PORT || 8000;
app.listen(port);
console.log("API is running at " + port);
I try to add cors in my node API and hope the error is gone but not.
This is the error:
I try to make I debug, the api call go on the server and execute sql query, but when he return he give me that error. What I must add in my server side code for the API to work?
Switch the order so that cors is before api
app.use(cors());
app.use('/api', router);
When you use cors you have to indicate what domain or address can contact your api by adding it in the cors middleware like this:
app.use(cors({
origin: "http://localhost:3000"
}));
I implemented a basic express app for cloud functions. I have used the cors library to enable cors. There are 4 api endpoints and all 4 need to be preflighted. For some reason, access-control-allow-origin:* header is placed on the 3 routes and not the 4th one.
Precisely, i'm using Content-Type: application/json for POST requests, which need to be preflighted. All the endpoints need the same headers, but it isn't applied for the last one.
Code snippets:
const express = require("express");
const cors = require("cors");
const bodyParser = require('body-parser');
const admin = require("firebase-admin");
admin.initializeApp();
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(express.json());
app.use('/', require('./controllers'));
exports.apiv2 = functions.https.onRequest(app);
Routes:
const express = require('express');
const router = express.Router();
router.use('/create-player', require('./createPlayer'));
router.use('/create-game', require('./createGame'));
router.use('/join-game', require('./joinGame'));
router.use('/move', require('./makeMove'));
// 404 error handler for invalid player and game IDs
router.use((err, req, res, next) => {
res.json({ error: err.msg });
});
module.exports = router;
For the /move route alone, the cors request fails, even after preflight request passes. Preflight passes with 204. The actual request fails for some reason. The POST request fails
Is there any particular access control header is not placed by express for one endpoint alone ?
You can set this middleware before your routes middleware in app.js to solve thi problem:
// app.js
...
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
if ('OPTIONS' === req.method)
res.sendStatus(200);
else
next();
});
...
app.use(routes);
Then, this will be applied for all of your routes.
I know that this question has been answered and some of them worked but for me it is not. I'm struggling to find a solution for this problem:
Access to XMLHttpRequest at 'http://lolcahost:9000/api/users' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I already tried downloading a chrome extension but didn't help me and using app.use(cors()) also didn't help me.
This is my code in expressjs
/* Importing all necessary packages. */
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
/* Default port */
const port = process.env.PORT || 9000;
/* Creating express object */
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/api', require('./routes/route'));
app.use(cors());
app.get('/', (request, response) => {
response.json({
HOME: "HELLO JSON"
})
});
app.listen(port, () => {
console.log(`Listening at port ${port}`)
});
and this is my code in vuejs where I'm trying to render the data.
getUsers() {
axios
.get("http://localhost:9000/api/users/")
.then(response => (this.results = response.data))
.catch(error => console.log(error));
}
You are using the cors middlware AFTER the /api routes. So, actually the cors middlware is not even being called. Put the cors above other middlwares.
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/api', require('./routes/route'));
Middlwares are called by the order they are initialised. Now, the /api is initialised first and is not a middleware(doesn't call the next() function) so after the routes any middleware is basically unreachable code.
Try this.
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:8080"); // update to match the domain you will make the request from
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
or
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
I'm using Angular to call a GET request to Express/Node:
$http.get('/auth/'+type).
success(function(user){
}).
error(function(err){
if (err){
$scope.alerts.addAlert('danger',err);
}
});
The Express/Node configuration which ( I think includes CORS correctly):
var express = require('express'),
app = module.exports.app = express();
//express compression
var oneDay = 86400000;
var compression = require('compression');
app.use(compression());
// CORS support.
app.all('*', function(req, res, next){
if (!req.get('Origin')) return next();
res.set('Access-Control-Allow-Origin', '*');
res.set('Access-Control-Allow-Methods', 'GET');
res.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
if ('OPTIONS' == req.method) return res.send(200);
next();
});
app.use(express.static(__dirname + '/app/dist', { maxAge: oneDay }));
When I fire the $http.get, I get an Access Control error:
XMLHttpRequest cannot load http://www.meetup.com/authenticate/?oauth_token=f515918e2415f9a321ljsf34. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:2997' is therefore not allowed access.
You could check the answer which I have given in this:
How to add 'res.addHeader("Access-Control-Allow-Origin", "*")' in express js?
Hoping it could be helpful