I want to deploy my NextJs app to my Pi4 where i have multiple active services. So I use a proxy from http://MYDOMAIN/convert/ to http://localhost:3000 but when I open the page in the Browser I get alot of 404 Errors. What throws me of is that I can see the nextjs error page. Is there a solution to that?
next.config.js:
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
reactStrictMode: true,
basePath: isProd ? '/convert' : '',
assetPrefix: isProd ? '/convert/' : '',
}
additional apache.conf:
ProxyPass /convert http://localhost:3000/
404 Errors on webpage
Related
I'm trying to setup a proxy to Contentful Delivery SDK to intercept the response and add relevant data. For development purposes, the proxy is still running locally. This is the configuration I'm using right now:
const client = createClient({
space: SPACE_ID,
accessToken: ACCESS_TOKEN,
host: CDN_URL,
environment: ENVIRONMENT,
basePath: 'api',
retryOnError: false,
proxy: {
host: 'localhost',
port: 8080,
auth: {
username: 'username',
password: 'password',
},
},
});
For some reason, this client keeps ignoring the proxy settings, making the request directly to Contentful CDN. I tried removing the host field from the configuration, but it didn't change the outcome. I also tried using the httpsAgent configuration with HttpsProxyAgent instead of the proxy one, but also didn't work.
Versions:
"contentful": "^7.11.3"
"react": "^16.13.1"
Firstly, the proxy configuration cannot be used client-side. It's unclear if that is your use case here.
There is a known bug here. Either try installing a newer version of Axios, which is the lib that the contentful SDK uses. Or use a proxyAgent:
const HttpProxyAgent = require("http-proxy-agent");
const httpAgent = new HttpProxyAgent({host: "proxyhost", port: "proxyport", auth: "username:password"})
Now just pass the agent into the create client method:
const client = createClient({
....
httpAgent: httpAgent,
....
});
I'm working on an webapp (Laravel/Vue) with a subdomain per organisation (companyone.mydomain.com, companytwo.mydomain.com, ...)
As authentication system I'm using Laravel Sanctum with cookies. While setting a cookie is working on localhost it's not working when using subdomains locally.
My backend is running on localhost:8000 while the frontend is running on localhost:8080. For cors reasons I've added a proxy property in vue.config.js
module.exports = {
devServer: {
disableHostCheck: true,
proxy: 'http://localhost:8000',
},
};
I've changed the /etc/hosts file so I can simulate subdomains locally
127.0.0.1 localhost
127.0.0.1 mydomain.com
127.0.0.1 companyone.mydomain.com
127.0.0.1 companytwo.mydomain.com
On the backend I've added the following lines to the .env file (and restarted the php artisan serve script)
SESSION_DOMAIN=.mydomain.com
SANCTUM_STATEFUL_DOMAINS=mydomain.com
In the Authcontroller I'm returning the cookie like this
$token = $user->createToken(Str::random(10))->plainTextToken;
$cookie = cookie('mydomain_api', $token, 60 * 24);
return response([
'token' => $token,
'user' => new AuthResource($user)
], 200)->withCookie($cookie);
The cookie settings are the following
$domain = null
$secure = true
$httpOnly = true
$sameSite = 'None'
When calling the login function I'm receiving the cookie in my browser like this
but Application -> Cookies stays empty
The request header
When sending another request to the api, no cookies are added.
How can I get the cookie in the Cookies storage?
[EDIT 1] When hardcoding the domain on the backend to mydomain.com I'm getting the following error in the browser
Update your .env
SANCTUM_STATEFUL_DOMAINS=localhost:8080,mydomain.com:8080,companyone.mydomain.com:8080,companytwo.mydomain.com:8080,::1,localhost:8080,localhost:3000
try to add folowing lines in your in .htaccess file
# Handle Authorization Header
# RewriteCond %{HTTP:Authorization} .
# RewriteRule .* - [E=Authorization:%{HTTP:Authorization}]
const validateUser = await this.authService.validateUser(email, password);
const jwt = await this.authService.login(validateUser);
const cookie = response.cookie('jwt', jwt.access_token, { httpOnly: true });
Environment :
Nuxt.js host on Netlify
Nest.js host on Heroku
I'm using cookies in local development to make request after being loged.
But when I'm trying to host the front and back into Netlify and Heroku, the cookies do not be set (with the same configuration)
Is there a config needed to make it work ?
Edit :
response.cookie('jwt', jwt.access_token, {
httpOnly: true,
sameSite: 'none',
secure: true,
});
Google chrome need this configuration to make cookies working
i am having a https create-react-app application(https://xyz.site.com), i am proxing a server which is a different domain, when i am loading the application the api is giving the web html data as a response, there is no hit happened in the server,
i have tried using HTTPS=true in .env file, still i am not able to get the server response
setupProxy.js
module.exports = (app) => {
app.use(
'/api',
createProxyMiddleware({
target: process.env.REACT_APP_API_URL, // https://xxx-alb-23333.us-west-2.elb.amazonaws.com
changeOrigin: true,
}),
);
};
I have a series of serverless next.js apps running on AWS that I am serving at subdomains, and I want to proxy them to subdirectories on my main domain. So, for example, the app at foo.example.com/foo/ should appear at www.example.com/foo/.
I've accomplished this by using http-proxy and express. I have a fairly simple express server that runs in its own serverless app, like so:
const serverless = require('serverless-http');
const httpProxy = require('http-proxy');
const express = require('express');
const app = express();
const proxy = httpProxy.createProxyServer();
app.get('/', (req, res) => {
res.send('Hello, you are at index.');
});
app.get('/:project/*', (req, res) => {
const project = req.params.project;
const rest = req.params[0];
const url = `https://${project}.example.com/${project}/`;
req.url = `/${rest}`;
req.headers['X-Projects-Router-Proxy'] = true;
req.body = undefined;
proxy.web(req, res, {
target: url,
xfwd: false,
toProxy: true,
changeOrigin: true,
secure: true,
});
});
module.exports.handler = serverless(app);
This works quite well on its own, which is great. However, when I try to put this behind CloudFront, the index page works fine, but anything that touches the proxy returns a 403 error:
403 ERROR
The request could not be satisfied.
Bad request.
Generated by cloudfront (CloudFront)
What might be going wrong here, and how can I configure http-proxy so that it will cooperate with CloudFront?
You need to add *.example.com into CloudFront CNAME/Alternative name filed and also in DNS to point it to CloudFront, when url changes as {project}.example.com, CloudFront finds the distribution based on the host header and if it can't find, it'll give you 403 error.