How to configure a proxy like in CRA without create-react-app? - javascript

In a create-react-app, I can use proxy in package.json to configure a proxy automatically, as described in here https://create-react-app.dev/docs/proxying-api-requests-in-development/
This allow me to serv my app from a different port.
How can I do the same configuration without create-react-app?
It would be nice to have the same proxy to benefit the same configuration as in with create-react-app.

You can create a file to run with node to act as your proxy. Like this:
proxy.js
const httpProxy = require('http-proxy');
const proxy = httpProxy.createProxyServer({
secure: false,
changeOrigin: true,
target: 'https://someOriginURL.com',
// could be an IP address target: 'https://XX.XX.XXX.XXX/',
}).listen(3500, () => console.log('Proxy running on port 3500'));
// Intercepts the request
proxy.on('proxyReq', function(proxyReq, req, res, options) {
console.log(req);
// Set the headers of the intercepted request
proxyReq.setHeader('Origin', 'https://yourorigin.com');
// remove any headers you want
// proxyReq.removeHeader('authorization');
res.oldWriteHead = res.writeHead;
res.writeHead = function(statusCode, headers) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.oldWriteHead(statusCode, headers);
}
});
to use this open a terminal and run:
node proxy.js
P.S.: Don't use this in production :D

Related

NodeJS HTTPS server serving over HTTP instead of HTTPS when running inside Docker container

I'm creating a website using NextJS and Docker so that I can easily deploy it. I used npx-create-next-app to initialize it and used this Dockerfile (slightly modified) to containerize it. Since I wanted to use SSL with my server without going through the hassle of setting up a proxy, I followed this article, and setup the custom server.
This worked fine when I ran it outside of a docker container, and performed as expected, serving over HTTPS. However when I containerized it, and tried to open the webpage over HTTPS, I came up with SSL_ERROR_RX_RECORD_TOO_LONG, but I could open the page using just HTTP (which I could not do when running outside of a container). Some googling led me to this question, from which I concluded that when running outside of a docker container, the custom server runs the server over HTTPS, as expected, however when I containerize it, it starts running HTTP, even though no code has been changed.
I'd expect the behavior to be the same when running locally or containerized.
At first I assumed this was due to invalid key and cert values in httpsOptions however I wasn't able to find anything that would make them invalid, and I don't see how that would cause this strange behavior. I tried changing the Docker run environment from node:alpine-16 to just node:latest to see if it had something to do with the parent image, but that was fruitless.
One other minor issue I had is that console.log does not seem to output to the container's log for some reason, I tried googling this but didn't find much of anything pertaining to it. This has made debugging much harder as I can't really output any debug data. The only log I get when running inside of a container is Listening on port 3000 url: http://localhost:3000, which I assume is output by some library/package as it isn't anywhere in my code.
Here is my custom server code in case it would be helpful:
const https = require('https');
const fs = require('fs');
const { parse } = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const hostname = "127.0.0.1";
const port = process.env.PORT || 3000
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
const httpsOptions = {
key: fs.readFileSync('./cert/privkey.pem'),
cert: fs.readFileSync('./cert/fullchain.pem')
};
app.prepare().then(() => {
https.createServer(httpsOptions, async (req, res) => { // When running on docker this creates an HTTP server instead of HTTPS
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
await handle(req, res, parsedUrl)
}).listen(port, (err) => {
if(err) throw err
console.log(`Ready on https://localhost:${port}`)
})
})
Link to a reproducible example here.
The thing is, based on your sample repo, that your server.js file that is in the root of your repo gets overwritten in the image because of this line in the Dockerfile:
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
So the actual server.js that is running in the container is the server.js that is created by the yarn build command and it looks like this (you can exec into the container and see it for yourself):
const NextServer = require('next/dist/server/next-server').default
const http = require('http')
const path = require('path')
process.env.NODE_ENV = 'production'
process.chdir(__dirname)
// Make sure commands gracefully respect termination signals (e.g. from Docker)
// Allow the graceful termination to be manually configurable
if (!process.env.NEXT_MANUAL_SIG_HANDLE) {
process.on('SIGTERM', () => process.exit(0))
process.on('SIGINT', () => process.exit(0))
}
let handler
const server = http.createServer(async (req, res) => {
try {
await handler(req, res)
} catch (err) {
console.error(err);
res.statusCode = 500
res.end('internal server error')
}
})
const currentPort = parseInt(process.env.PORT, 10) || 3000
server.listen(currentPort, (err) => {
if (err) {
console.error("Failed to start server", err)
process.exit(1)
}
const nextServer = new NextServer({
hostname: 'localhost',
port: currentPort,
dir: path.join(__dirname),
dev: false,
customServer: false,
conf: {"env":{},"webpack":null,"webpackDevMiddleware":null,"eslint":{"ignoreDuringBuilds":false},"typescript":{"ignoreBuildErrors":false,"tsconfigPath":"tsconfig.json"},"distDir":"./.next","cleanDistDir":true,"assetPrefix":"","configOrigin":"next.config.js","useFileSystemPublicRoutes":true,"generateEtags":true,"pageExtensions":["tsx","ts","jsx","js"],"target":"server","poweredByHeader":true,"compress":true,"analyticsId":"","images":{"deviceSizes":[640,750,828,1080,1200,1920,2048,3840],"imageSizes":[16,32,48,64,96,128,256,384],"path":"/_next/image","loader":"default","loaderFile":"","domains":[],"disableStaticImages":false,"minimumCacheTTL":60,"formats":["image/webp"],"dangerouslyAllowSVG":false,"contentSecurityPolicy":"script-src 'none'; frame-src 'none'; sandbox;","remotePatterns":[],"unoptimized":false},"devIndicators":{"buildActivity":true,"buildActivityPosition":"bottom-right"},"onDemandEntries":{"maxInactiveAge":15000,"pagesBufferLength":2},"amp":{"canonicalBase":""},"basePath":"","sassOptions":{},"trailingSlash":false,"i18n":{"locales":["en"],"defaultLocale":"en"},"productionBrowserSourceMaps":false,"optimizeFonts":true,"excludeDefaultMomentLocales":true,"serverRuntimeConfig":{},"publicRuntimeConfig":{},"reactStrictMode":true,"httpAgentOptions":{"keepAlive":true},"outputFileTracing":true,"staticPageGenerationTimeout":60,"swcMinify":true,"output":"standalone","experimental":{"middlewarePrefetch":"flexible","optimisticClientCache":true,"manualClientBasePath":false,"legacyBrowsers":false,"newNextLinkBehavior":true,"cpus":7,"sharedPool":true,"profiling":false,"isrFlushToDisk":true,"workerThreads":false,"pageEnv":false,"optimizeCss":false,"nextScriptWorkers":false,"scrollRestoration":false,"externalDir":false,"disableOptimizedLoading":false,"gzipSize":true,"swcFileReading":true,"craCompat":false,"esmExternals":true,"appDir":false,"isrMemoryCacheSize":52428800,"fullySpecified":false,"outputFileTracingRoot":"","swcTraceProfiling":false,"forceSwcTransforms":false,"largePageDataBytes":128000,"enableUndici":false,"adjustFontFallbacks":false,"adjustFontFallbacksWithSizeAdjust":false,"trustHostHeader":false},"configFileName":"next.config.js"},
})
handler = nextServer.getRequestHandler()
console.log(
'Listening on port',
currentPort,
'url: http://localhost:' + currentPort
)
})
And as you see it starts a http server not a https. Also this is why the console.log("lksdfjls"); in your own server.js will not get executed.
What I would suggest is to leave node as it is, running on http://localhost:3000 and set up a reverse proxy that would forward incoming requests to this node backend that is accessible only from the reverse proxy. And of course reverse proxy would handle TLS termination. A docker compose setup would be more convenient for this so you could put the reverse proxy container (nginx for example) in the compose project too and map a directory from the docker host where your cert files are stored into the reverse proxy container at runtime - DO NOT BAKE CERTS OR ANY OTHER SECRETS INTO ANY IMAGE, not even if it is an internally used image only because it could leak out accidentally any time.
Also you could just manually run the two container with docker run but compose would make life easier it has a lot of capabilities for example you could scale compose services up and down so your backend service would run not in one but many containers. But if this would be a high load and/or business critical production stuff then you are better off with a better (real) container orchestrator like kubernetes, docker swarm, nomad etc but today as I see it the de facto container orchestrator is kubernetes.

HTTP POST body not attached in the proxied request using http-proxy-middleware

I'm developing a React application and I need to make a POST request to a remote API in which I set header("Access-Control-Allow-Origin: *");
to disable the CORS policy.
However when I contact the server, some CORS policy issues come out, so I setuped a proxy server through http-proxy-middleware.
The problem is that the request is correctly proxied but without body and I cannot understand why. Can someone help me?
Here's the setupProxy.js:
const bodyParser = require('body-parser')
module.exports = function(app) {
// restream parsed body before proxying
var restream = function(proxyReq, req, res, options) {
if (req.body) {
let bodyData = JSON.stringify(req.body);
// incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
proxyReq.setHeader('Content-Type','application/json');
proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
// stream the content
proxyReq.write(bodyData)
proxyReq.end();
}
}
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(
'/api/*',
createProxyMiddleware({
target: 'https://<domain>',
changeOrigin: true,
pathRewrite: {
'^/api/': '<path>'
},
logLevel:'debug',
onProxyReq: restream,
})
);
};
Details of the system:
macOS Big Sur v11.5.2
Node v16.13.2
Details of the http-proxy-middleware configuration:
├── http-proxy-middleware#2.0.4
└─┬ react-scripts#5.0.0
└─┬ webpack-dev-server#4.7.4
└── http-proxy-middleware#2.0.4 deduped
I got the same. I found a solution here : https://npmmirror.com/package/http-proxy-middleware/v/1.2.0-beta.1.
Add this in your createProxyMiddleware parameters :
onProxyReq: fixRequestBody
PS : it's the same as 60 second timeout in http-proxy-middleware i think

Localhost refuses to connect when I make setupProxy.js

I made my setupProxy.js to deal with a CORS issue:
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
proxy('/myUrl', {
target: 'http://localhost:8090',
changeOrigin: true
})
)
};
After I made it and run 'npm start' again, my browser says that localhost refuses to connect. If I delete setupProxy.js, I can connect to localhost, but the CORS policy blocks to connect with backend server.
Do you have any idea to connect to frontend, still using the setupProxy.js?
You can try this: createProxyMiddleware
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
createProxyMiddleware('/myUrl', {
target: 'http://localhost:8090',
changeOrigin: true,
})
);
};
https://stackoverflow.com/a/60354374/11652543
See that you have spelled the name of setupProxy.js well that solved the problem for me. If that does not work. Copy and pase the fb's code the way it is into the setupProxy.js Code can be found here

How to Set up Vue CORS for different domain API?

I' trying to deploy an Vue app which has a separate backend and which will be hosted in different domain. For example:
meow.cat.xyz (App)
api.meow.cat.xyz (API)
Now after npm run build I tried to preview it locally by running serve -s dist and the application is severing at localhost:5000. However the problem is it not sending API request at the current end point (which is localhost:8000 at local and api.meow.cat.xyz at server). I tried config CORS as following
vue.config.js
module.exports = {
devServer: {
port: process.env.VUE_APP_DEV_PORT,
proxy: process.env.VUE_APP_API_ROOT_PATH,
},
};
.env.development
VUE_APP_API_ROOT_PATH = 'http://localhost:8000/api'
VUE_APP_DEV_PORT = 3000
Note that I'm using axiox. Here is my axios setup.
API.js
import axios from "axios";
const injectAccessToken = (config) => {
const accessToken = localStorage.getItem("access_token");
if (accessToken)
config.headers.common["Authorization"] = `Bearer ${accessToken}`;
return config;
};
const config = {
baseURL: process.env.VUE_APP_API_ROOT_PATH,
};
const API = axios.create(config);
API.interceptors.request.use(injectAccessToken);
export default API;
and Using it as following
Login.vue
import API from "#/api/Api";
<script>
const res= await API.post('login')
</script>
This solution is not working yet. Its sending request at http://localhost:5000. What's the point ? Note that I'm using axios. thanks in advance.
Allow CORS requests from the server
With the Access-Control-Allow-Origin header, you can specify what origins can use your API.
app.get('/api', (req, res) => {
res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
res.send({
api: "your request."
});
})
Allow CORS from the app's origin on the server (api).
This has nothing to do with with the client (app)

Electron Auth0Lock "Origin file:// not allowed"

Trying to get auth0 working with my electron app. When I follow the default tutorial and try to authenticate with Username-Password-Authentication, the lock fails with a 403 error and responds with "Origin file:// is not allowed".
I've also added "file://*" to the Allowed Origins (CORS) section of my client settings in the auth0 dashboard.
Auth0 Lock with console errors
Origin file:// is not allowed
EDIT:
Lock setup in electron
var lock = new Auth0Lock(
'McQ0ls5GmkJRC1slHwNQ0585MJknnK0L',
'lpsd.auth0.com', {
auth: {
redirect: false,
sso: false
}
});
document.getElementById('pill_login').addEventListener('click', function (e) {
e.preventDefault();
lock.show();
})
I was able to get Auth0 to work by using an internal express server in my electron app to handle serving pages.
First I created a basic express app in a separate folder in my project called http, here will be the express server code and html files to serve.
const path = require('path');
const express = require('express');
const app = express();
app.use(express.static(process.env.P_DIR)); // Serve static files from the Parent Directory (Passed when child proccess is spawned).
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:<PORT>'); // Set this header to allow redirection from localhost to auth0
next();
})
// Default page to serve electron app
app.get('/index', (req, res) => {
res.sendFile(__dirname + '/index.html');
})
// Callback for Auth0
app.get('/auth/callback', (req, res) => {
res.redirect('/index');
})
// Listen on some port
app.listen(<SOME_PORT>, (err) => {
if (err) console.log(err);
console.log('HTTP Server running on ...');
});
Then in the Electron main process, I spawn the express server as a child process
const {spawn} = require('child_process');
const http = spawn('node', ['./dist/http/page-server.js'], {
env: {
P_DIR: __dirname // Pass the current dir to the child process as an env variable, this is for serving static files in the project
}
});
// Log standard output
http.stdout.on('data', (data) => {
console.log(data.toString());
})
// Log errors
http.stderr.on('data', (data) => {
console.log(data.toString());
})
Now the auth0 lock authenticates as expected.

Categories

Resources