I have created a ReactJs app with a Node Api which uses Restify, but whatever I do I always have the error for POST method :
405 (Method Not Allowed)
Access to fetch at 'http://localhost:3001/api/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I have tried everything I saw on Internet but I always have this issue.
To call the API, here is my code :
const request = new Request(url + 'login', {
method: 'POST',
body: JSON.stringify({ 'username' : username, 'password' : password }),
headers: new Headers({ 'Content-Type': 'application/json' })
})
return fetch(request)
.then(response => {
if (response.status < 200 || response.status >= 300) {
throw new Error(response.statusText);
}
return response.json();
})
.then(({ token }) => {
localStorage.setItem('token', token);
});
And I configure Restify like this :
const config = require('./config'),
restify = require('restify'),
errs = require('restify-errors');
var connection = config.db.get
const server = restify.createServer({
name: config.name,
version: config.version,
url: config.hostname
});
server.use(restify.plugins.acceptParser(server.acceptable));
server.use(restify.plugins.queryParser());
server.use(restify.plugins.bodyParser());
server.use(
function crossOrigin(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-Methods', 'GET, POST, PUT, OPTIONS, DELETE');
res.header('Access-Control-Allow-Credentials', false);
return next();
}
);
server.listen(3001, function () {
console.log('%s listening at %s', server.name, server.url);
});
server.post("/api/login", function (req, res) {
res.send(200);
});
So I expect to receive a validation (code 200) after calling the Api, but I always have CORS issue.
Is there anything else to configure ?
Thanks for your help !!! :D
You have to use corsMiddleware to avoid cors issue....write this code in your app.js file ...it should be work fine
var restify = require('restify');
var corsMiddleware = require('restify-cors-middleware');
var cors = corsMiddleware({
preflightMaxAge: 5,
origins: ['*'],
allowHeaders:['X-App-Version'],
exposeHeaders:[]
});
/**
* Initialize Server
*/
var server = restify.createServer();
server.pre(cors.preflight);
server.use(cors.actual);
Related
This is my node,js API,that works with no problems using postman, but when I try to make a request from a different origin like a react project the request is blocked
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = process.env.PORT || 9000;
const routes = require('./routes/routes');
const token = require('./config/config');
const cors = require('cors')
app.use(cors())
app.use(express.json());
app.use('/api', routes);
app.listen(port, () => console.log('server listening on port', port));
const url = "mongodb://localhost/titles_db";
mongoose.connect(url,{})
.then( () => console.log('DB connected'))
.catch( (e) => console.log('Erorr on db connection'));
and this is the function that is called on my request
searchTitles = (req, res) => {
const terms = req.query.terms;
const format = req.query.format;
titleSchema.find({title: {$regex:terms, $options: 'i'}})
.then( data => {
if(format == 'json')
res.json(data);
else{
res.setHeader("Content-Type", "text/plain");
res.send(data);
}
})
.catch( error => res.json( {message: error}))
}
and here is the function that makes the request on the frontend
const getFieldText = e => {
setTerm({term: e.target.value });
const url = `http://localhost:9000/api/titles/?terms=${e.target.value}&format=json`
fetch(url)
.then(response => console.log(response))
.then(data => console.log(data));
}
even including cors library on node
const cors = require('cors')
app.use(cors())
I get this response
Response { type: "cors", url: "http://localhost:9000/api/titles/?terms=aaaaaa&format=json", redirected: false, status: 403, ok: false, statusText: "Forbidden", headers: Headers, body: ReadableStream, bodyUsed: false }
I added an options array but I have the same result
var corsOptions = {
origin: 'http://localhost:3000',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
app.use(cors(corsOptions))
configure the cross headers like this (in your server node config):
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', "http://localhost:8080");
// 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', 'Origin, X-Requested-With, Content-Type, Accept, authorization, Access-Control-Allow-Origin');
// 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();
});
Tried everything I could find on here in regards to setting up cors for my node server. Tried aliasing my localhost and that doesn't seem to work either. Also tried using the CORS unblock extension.
error: localhost/:1 Access to fetch at
'http://localhost:8080/api/login' from origin 'http://localhost:3000'
has been blocked by CORS policy: Response to preflight request doesn't
pass access control check: It does not have HTTP ok status.
:8080/api/login:1 Failed to load resource: net::ERR_FAILED
im trying to use magic link authentication in my react app. I got this POST request being made to my node server
const res = await fetch(`http://localhost:8080/api/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + didToken,
},
});
my server code is
const express = require("express");
const cors = require("cors");
const { Magic } = require('#magic-sdk/admin');
require('dotenv').config();
const app = express()
const magic = new Magic(process.env.MAGIC_SECRET_KEY);
app.use("*", (req, res) => res.status(404).json({ error: "not found" }));
// Allow requests from client-side
app.use(cors({origin: process.env.CLIENT_URL}));
app.all('*', (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept, Authorization'
);
res.sendStatus(200);
next();
});
app.post('api/login', async (req, res) => {
console.log("login fired")
try {
const didToken = req.headers.authorization.substr(7);
await magic.token.validate(didToken);
res.status(200).json({ authenticated: true });
} catch (error) {
res.status(500).json({ error: error.message });
}
});
module.exports = app
app.use(cors({origin: process.env.CLIENT_URL}));
I'd be curious what this URL is. If you want an open CORS policy you don't need to set anything any there.
Put a "/" in front of this route
app.post('/api/login', async (req, res) => {
I was able to reproduce your problem locally and this server setup worked for me to fix it.
const express = require("express");
const cors = require("cors");
const port = 8080;
const app = express();
app.use(cors());
app.post("/api/login", async (req, res) => {
console.log("login fired");
try {
res.status(200).json({ authenticated: true });
} catch (error) {
res.status(500).json({ error: error.message });
}
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
module.exports = app;
I'm trying to post data from angular (on port 4200) to the back-end node.js express server on port 3000.
What I've done so far: I have tried to post the json data from angular to the httpbin.org (a 3rd party server for test use), which proves that my function in angular is valid to post the json data.
Also, I used angular to get data from API of other websites, and they all work, only the nodejs server which is hosted on port 3000 has CORS problem when posting data from angular to it.
I have been googling to change the header of cors for the nodejs server and checked the firewall and lots of other approaches, but nothing works, I always get the CORS error.
**Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:3000/api/postData. (Reason: CORS request did not succeed).**
**ERROR:**
Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "http://127.0.0.1:3000/api/postData", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://127.0.0.1:3000/api/postData: 0 Unknown Error", error: error }
error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … }
headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) }
message: "Http failure response for http://127.0.0.1:3000/api/postData: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://127.0.0.1:3000/api/postData"
<prototype>: Object { … }
the Angular file: compoent.ts
getData(loc : any) {
//angular --> nodejs
const headers = new HttpHeaders()
.set('Authorization', 'my-auth-token')
.set('Content-Type', 'application/json');
this.http.post<any>("http://127.0.0.1:3000/api/postData", JSON.stringify(loc)).subscribe(response =>{
console.log(response);
});
I tried all kinds of headers and cors that I can find on the internet in this Nodejs file but nothing works: app.js
const express = require('express')
const app = express()
const port = 3000
const cors = require('cors')
app.options('*', cors()) // include before other routes
//app.use(cors())
const corsOpts = {
origin: '127.0.0.1:3000',
methods: [
'GET',
'POST',
],
allowedHeaders: [
'Content-Type',
],
};
app.use(cors(corsOpts));
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();
// Website you wish to allow to connect
res.header('Access-Control-Allow-Origin', '127.0.0.1:3000');
// Request methods you wish to allow
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.header('Access-Control-Allow-Headers', 'Accept, Content-Type, X-Requested-With', 'X-HTTP-Method-Override');
// 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.header('Access-Control-Allow-Credentials', true);
if (req.method === 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});
app.use(
cors({
allowedHeaders: ["authorization", "Content-Type"], // you can change the headers
exposedHeaders: ["authorization"], // you can change the headers
origin: "*",
methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
preflightContinue: false
})
);
app.get('/', (req, res, next) => {
res.send("wtffffffffffffffffff");//send to the page
})
app.get('/getAPIResponse', (req, res, next) => {
api_helper.make_API_call('https://jsonplaceholder.typicode.com/posts')
.then(response => {
res.json(response)
})
.catch(error => {
res.send(error)
})
})
//angular --> nodejs
app.post('/api/postData',cors(), (req, res, next) => {
console.log("/postData success when running ng serve");
console.log(req.body);
})
app.listen(port, () => console.log(`NodeJS App listening on port ${port}!`))
This is the proxy file : proxy.conf.json
{
"/api/*": {
"target": "http://127.0.0.1:3000",
"pathRewrite": {"^/api" : ""},
"secure" : false,
"changeOrigin" : true
}
}
The problem is simple: I did not run the nodejs server at the backend
From the docs
Simple Usage (Enable All CORS Requests)
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
Get the basic CORS setup working first and then think about battoning down the hatches with some CORS config.
Also remove your proxy config if you are using CORS. Make HTTP requests direct from FE (browser) to your BE server if using CORS.
I am using fetch api to make request from reactjs to node.js backend with Basic Authorization with the code below...
React
fetch(baseUrl, {
method: 'get',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: 'Basic ' + secret,
},
}).then((res) => {
if (res.ok) {
return res.json();
} else {
return Promise.reject(res.statusText);
}
})
.then((resBody) => {
//
})
.catch((error) => {
console.error(error);
});
Node.js
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');
res.setHeader('Access-Control-Allow-Credentials', true);
return next();
});
app.use((req, res, next) => {
const base64Credentials = (req.headers.authorization || '').split(' ')[1] || '';
const [username, password] = Buffer.from(base64Credentials, 'base64').toString().split(':');
const auth = { username: 'username', password: '123456' }
console.log(username, password, auth.username, auth.password);
// comment below
if (username === auth.username && password === auth.password) {
return next();
} else {
res.status(401).send('Authentication required.'); // custom message
}
});
The following error is occur when I try to make the request.
Access to fetch at 'http://127.0.0.1:5000/' from origin
'http://localhost:3000' has been blocked by CORS policy: Response to
preflight request doesn't pass access control check: It does not have
HTTP ok status.
However, when I comment the comparison part in the second middleware if (username === auth.username && password === auth.password) it works fine. I have tried using Postman to send request it also no problem happen. The problem only occur when I make the request from react app. Anyone know what is the reason? Thanks a lot
it seems that the CORS npm is no installed npm i cors and write this code:
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
more information about CORS npm
I'm running a vue app on an apache server on a virtual server. Express is started with nodemon.
When trying to login I'm getting a
Cannot read property 'status' of undefined xhr.js:160
POST https://143.93.46.35:60702/user/login net::ERR_TIMED_OUT
on chrome and
Cross-source (cross-origin) request blocked: The same source rule prohibits reading the external
resource on https://143.93.46.35:60702/user/login. (Reason: CORS request failed)
on firefox.
In vue my axios baseURL looks like (node is running on port 60702):
const apiClient = axios.create({
baseURL: `https://pvapp.umwelt-campus.de:60702`,
withCredentials: false, // This is the default
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
})
export default{
loginUser (user) {
return apiClient.post(`/user/login`, user)
},
...
}
And the user route on express is:
router.post('/login', async (req, res) => {
let compareUser = await db.query('SELECT * FROM app_users WHERE username=? LIMIT 1', [req.body.username]); // use db.query() to retrieve the password
if (compareUser.length < 1) // compareUser is an array with at most one item
res.sendStatus(403);
let valid = bcrypt.compareSync(req.body.password, compareUser[0].password);
if (!valid)
res.sendStatus(403);
let user = new User(compareUser[0]);
const token = jwt.sign({ user }, nconf.get('jwtToken'), { expiresIn: '14d' });
Object.assign(user, { token });
res.json(user);
});
In app.js cors is enabled like:
app.use(cors());
You need to res.setHeader('Access-Control-Allow-Origin', YourOrigin); in a middlewar before app.use(cors()); in order to allow the client.
EDIT :
You can do something like this :
router.use(function (req, res, next) {
let origin = req.headers.origin;
if (allowedOriginsTab.includes(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
}
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});