when i add a random header to a reply in Hapi.js, it works fine.
However when I am trying to add to a header that already exisits, it is not sent.
It is almost as if i didn't even add it.
reply("Hello World)
.header("Random-Header", "Random Reply")
.header("Access-Control-Expose-Headers","Authorization");
Is there a way to add the Access-Control-Expose-Headers - Authorization?
If you want to use CORS headers you should enable/configure them in route options (CORS headers disabled by default):
server.route({
method: 'GET',
path: '/',
handler: function(request, reply) { ... },
config: {
cors: {
origin: ['*'], // list of valid domains
exposedHeaders: ['Authorization'] // 'Access-Control-Expose-Headers'
}
}
});
Read more about defaults and options in hapi documentation.
or you can enable CORS on all routes:
new Hapi.Server({
connections: {
routes: {
cors: {
origin: ['*'],
exposedHeaders: ['Authorization']
}
}
}
})
Related
I'm trying to figure out why when I make a call to my "API" (nodejs express) from my React client the OPTIONS, preflight request is executed first.
Server api run on http://localhost:8000
Client run on http://localhost:3000
In my React client I configured http-proxy-middleware as follows:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8000',
changeOrigin: true,
})
);
};
Also the Axios instance is created with following options
const options = {
baseURL: BASE_URL,
timeout: 300000,
withCredentials: false,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
}
};
axios.create(config);
The Node.js(Express) BackEnd application is configured as follow:
app.use(cors(
{
"origin": "*", // just for test...
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
"allowedHeaders": "*" // just for test
}
));
When I make a Post for instance for server-side token validation a preflight OPTIONS request is made. How can I avoid this ? Am I doing something wrong?
Thank you all.
I'm making an API in Nestjs that is consumed by an application in ReactJs. My problem is in the login route, when I use swagger, the cookie is saved in the browser normally but when I do a fetch from the front end, the cookie is not saved even though the response headers have the cookie.
I already tried to use all the sameSite options, I tried to put credentials include in the fetch but nothing works. If I log in to swagger first, then I try to do it in react, react copies the cookie that is saved in swagger.
For example, if in swagger I log in with user 1, and in react with the user 2, react steals the cookie from user 1 and ignores user 2 response cookie.
Code in react:
const res = await fetch(`${API_URL}/auth/login`, {
method: "POST",
headers: { "Content-type": "application/json", accept: "*/*" },
// credentials: "include",
body: JSON.stringify(data),
});
Main.ts:
const corsOptions = {
origin:
process.env.NODE_ENV === 'development' ||
process.env.MY_NODE_ENV === 'development'
? [process.env.PLATFORM_LOCAL_URL, process.env.LANDING_LOCAL_URL]
: [process.env.PLATFORM_PROD_URL, process.env.LANDING_PROD_URL],
credentials: true,
allowedHeaders: 'Content-Type, Accept, Origin',
preflightContinue: false,
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
};
app.enableCors(corsOptions);
app.use(helmet());
app.use(cookieParser());
Login Controller:
#UseGuards(LocalAuthGuard)
#Post('auth/login')
async login(
#Body() _: MakeAuthDto,
#Request() req,
#Res({ passthrough: true }) res,
) {
const access_token = await this.authService.login(req.user);
const cookiesOpts = {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'none',
path: '/',
maxAge: 60 * 60 * 24 * 3,
};
res.cookie('jwt', access_token, cookiesOpts);
return {
response: {
user: req.user,
expire: new Date().setDate(new Date().getDate() + 3),
},
};
}
Work on swagger:
After make request from ReactJs, the response cookies has the jwt:
But the cookie are not stored:
Looks like you're trying to set a cookie with the swagger editor.
See Note for Swagger UI and Swagger Editor users:
Cookie authentication is currently not supported for "try it out" requests due to browser security restrictions. See this issue for more information. SwaggerHub does not have this limitation.
In my local environment, I'm trying to set up user tokens after login in my NextJS app (localhost:3005), using the response from my express backend (localhost:3020). I can see set-cookie in the response on the server, but the cookies in the getServerSideProps is empty always.
My code is pretty basic:
Express backend
// Cors set up
cors({
methods: "GET,HEAD,OPTIONS,POST",
preflightContinue: false,
credentials: true,
origin: [
"http://localhost:3005",
...
],
optionsSuccessStatus: 204,
})
// Response - can see this cookie in set-cookie
return res.cookie("test", "test1", {
httpOnly: true,
sameSite: "none",
expires,
domain: "localhost:3005", // tried without this also
}).redirect("http://localhost:3005/login");
My NextJS app has the following:
//Login component : on login submit
const resp = await fetch(
`${BACKEND_URL}login?originalUrl=/login`, // Redirecting back
{
headers: new Headers({
Authorization: "Bearer " + someToken,
}),
credentials: "include",
method: "POST",
redirect: "follow", // Tried this but did not work
}
);
// resp.redirected is true
// Login component - triggers correctly but no cookies
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { req } = ctx;
const { cookies } = req;
console.log("cookies", cookies ); // Always {}
return { props: {} };
};
I have been stuck with this for a while now guys, it seems like I'm missing something very trivial here. I'm not super familiar with NextJs, so any help here would be greatly appreciated. Thanks!
This was happening because of the Chrome SameSite=None + Secure requirement. Setting secure to true in the cookie resolved this issue. I did not have to set up SSL certificates for my local environment, just setting secure worked.
I am using Heroku to run my server, and I am using 'cores' at my backend side that wrote in Node.js.
I have these commands:
const corsConfig = {
origin: true,
credentials: true
};
app.use(cors(corsConfig));
app.options("*", cors(corsConfig));
in my client i am using vue.js:
module.exports = {
devServer: {
proxy: {
'/api': {
target: '"https://david-matan-recipe-api-server.herokuapp.com/',
ws: true,
changeOrigin: true
}
}
}
}
when I am trying to get some data from my backend with Axios I get this message at my browser:
Access to XMLHttpRequest at 'https://david-matan-recipe-api-server.herokuapp.com/api/recipes/random' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
try to set config like this:
const corsConfig = {
origin: 'http://localhost:8080'
};
I have been trying to do an api call (nodejs with express running on localhost) from a react app running in the browser over a local dev server (web-pack dev server). Everything was working well until I tried to call the api. They are both running on separate ports.
I have tried adding the cors headers (Recommended by MDN) to both the post call (from the app in browser) and to the response from the Nodejs API but neither of these solved the issue.
Code for the api call (in browser):
const headers = {
'Content-Type': 'application/json',
'access-token': '',
'Access-Control-Allow-Origin': '*',
}
export default async () => {
try {
const body = JSON.stringify({
test: true,
})
const response = await fetch('http://localhost:1337/internal/provider/check_email_exist', {
method: 'POST',
headers,
body,
})
console.log(response)
} catch (e) {
return e
}
}
API Middleware (in nodejs):
// Verify All Requests
app.use(VerifyToken)
// Compress
app.use(compression())
// Helmet middlware
app.use(helmet())
// Body Parser
app.use(bodyParser.urlencoded({
extended: false,
}))
app.use(bodyParser.json())
The expected result is to just give a 200 status code and respond with the data.
The actual output is:
OPTIONS http://localhost:1337/internal/provider/check_email_exist 404 (Not Found)
Access to fetch at 'http://localhost:1337/internal/provider/check_email_exist' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Since you're using webpack-dev-server you can use the proxy option DevServerProxy.
Your configuration will look like this:
// webpack.config.js
devServer: {
proxy: {
'/internal': 'http://localhost:1337'
}
}
Since I can't see your express routes on your question I'm speculating about the proxy route if your API lives on /internal endpoint then you should modify your React code like this:
const response = await fetch('/internal/provider/check_email_exist', {
method: 'POST',
headers,
body,
})
As you can see I ommited the https://localhost:1337 because the proxy option from webpack-dev-server will handle this and it will redirect to http://localhost:1337. Hope this will help you. Cheers, sigfried.
EDIT
As the comment on your question pointed out you should set the headers on your express server, not the client, for this task you can use the cors-middleware package.
Maybe this can help if you face with preflight errors.
My full config:
const cors = require('cors');
const express = require('express');
const { createProxyMiddleware: proxy } = require('http-proxy-middleware');
...
const logLevel = 'info';
const ip = require('ip').address();
const proxyOptions = {
xfwd: true,
target,
changeOrigin: true,
logLevel,
cookieDomainRewrite: {
'*': 'localhost',
},
headers: {
'X-Forwarded-For': ip,
'X-Node': 'true',
},
};
const backNginxApp = express();
backNginxApp.use(
cors({
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
origin: 'http://localhost:3000',
optionsSuccessStatus: 200,
credentials: true,
})
);
backNginxApp.use('/api', proxy(proxyOptions));
API: const target = 'https://someapi.com'
Local development running at: http://localhost:3000