I have ejected react scripts, and I have the following in my setupProxy.js.
module.exports = function(app) {
app.use(
proxy({
changeOrigin: true,
logLevel: "debug",
onProxyReq: function onProxyReq(proxyReq, req, res) {
console.log(
chalk.red(
'Request'
)
);
},
onError(err, req, res) {
console.log(err);
},
secure: false,
target: "http://www.google.com"
})
I would expect the above to proxy, and log every request going out from the react app, but this is not the case. Is there a config that I need to add in Webpack ?
Thank you
Related
Migrating a react application to an Nx integrated workspace, and having an issue with advanced proxy configuration.
I understand that for a simple proxy...
Specify the proxy.conf.json file
"serve": {
"executor": "#nrwl/webpack:dev-server",
"defaultConfiguration": "development",
"options": {
"verbose": true,
"buildTarget": "ydsca:build",
"hmr": true,
**"proxyConfig": "apps/ydsca/proxy.conf.json",**
"ssl": true,
"sslKey": "certs/localhost.key.pem",
"sslCert": "certs/localhost.crt.pem"
},
Implement the proxy.conf.json file, e.g....
{
"/caconnect/common/*": {
"target": "https://127.0.0.1:9443",
"secure": false,
"logLevel": "debug"
}
}
This works without any issues, however, the current React application uses "http-proxy-middleware" and a more advanced setupProxy.js file (wildcard matching such as "/**/common/" for any patch that contains /common/):
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
[
'/**/common/',
'/**/commonClassic/',
'/**/ydscaCommon/',
'/ymca',
'/staff'
],
createProxyMiddleware({
//Must use 127.0.0.1 as for some reason, localhost stopped working in node versions > 16
target: 'https://127.0.0.1:9443',
//Necessary for https with self signed certificates
secure: false,
changeOrigin: false,
//Additional logging stuff!
onProxyReq: function onProxyReq(proxyReq, req, res) {
// Log outbound request to remote target
console.log('--> ', req.method, req.path, '->', proxyReq.baseUrl + proxyReq.path);
},
onError: function onError(err, req, res) {
console.error(err);
res.status(500);
res.json({error: 'Error when connecting to remote server.'});
},
//logLevel: 'debug'
})
);
};
How can the same advanced proxying be configured in Nx?
Tried changing proxyConfig": "apps/ydsca/proxy.conf.json" to proxyConfig": "apps/ydsca/setupProxy.js", but it doesn't seem to like javascript files for proxy configuration!
Any suggestions?
Thank you.
I am trying to proxy requests with craco config. however the proxy seems to be ignored. Why is it not working?
I have a create-react-app project that I started using:
npx create-react-app check-proxy-config --template typescript
and I've added craco to it:
npm i -D #craco/craco
In addition I defined a proxy in craco.config.cjs file:
module.exports = {
webpack: {
devServer: {
logLevel: "debug",
proxy: {
"/api": {
target: "https://<any Domain whatsoever>",
logLevel: "debug",
secure: true, // false
changeOrigin: true, //false
bypass: function(req, res, options) {
console.debug("bypass");
},
onProxyReq: function(proxyReq, req, res) {
console.debug(`Proxying request: ${req.originalUrl} => ${proxyReq.path}`);
}
}
}
},
The request I'm sending from the browser is:
http://localhost:3000/api/something
None of the console.debug statements is printed. Why? how can I make the proxy work?
The configuration worked after checking in the backend server i was able to ensure there was no issue with the config, hoewever the "on" methods (i.e. onProxyReq, etc) are not being called
I am currently using the following config in my NextAuth for production:
const options = {
secret: process.env.NEXTAUTH_SECRET,
adapter: PrismaAdapter(prisma),
providers: [...],
pages: {
signIn: '/signin'
},
callbacks: {
...,
cookies: {
sessionToken: {
name: 'next-auth.session-token',
options: {
httpOnly: true,
sameSite: 'lax',
path: '/',
secure: process.env.NODE_ENV === 'production',
domain: hostName
},
},
}
}
export default (req, res) => NextAuth(req, res, options)
However when looking back I was using:
name: process.env.NODE_ENV === 'production' ? `__Secure-next-auth.session-token` : 'next-auth.session-token'
The problem is that if I use the __Secure-next-auth.session-token the authentication does not work in production (the session is never created) what is the difference between using next-auth.session-token and __Secure-next-auth.session-token? does using next-auth.session-token in production make my application vulnerable?
I've picked up a legacy project, and have been asked to update the create-react-app package from 1.0.3 to the latest.
The problem is, the new proxy settings aren't working; requests that were previously going to my/resource.do are just returning index.html
As suggested in the docs (https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually), I took the 'proxy' object in package.json and converted it to instructions in a file called setupProxy.js. The new js file is definitely being read; I just can't get it to work.
Can anyone see where the mistake is here? This is exactly as specified in the docs, but for some reason requests that worked before are now failing.
Any help greatly appreciated
Before (in package.json)
"proxy": {
"/api": {
"target": "http://localhost:9000"
},
"/some/thing": {
"target": "https://example.org:8452/",
"secure": false,
"changeOrigin": true
},
"/some": {
"target": "https://example.org:7324",
"secure": false,
"changeOrigin": true
},
"/.*": {
"target": "https://example.org:8452/",
"secure": false,
"changeOrigin": true
}
}
After (in setupProxy.js):
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use('/api', proxy({ target: 'http://localhost:9000/' }))
app.use('/some/thing', proxy(
{
target: 'https://example.org:8452/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
app.use('/some', proxy(
{
target: 'https://example.org:7324/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
app.use(proxy('/.*',
{
target: 'example.org:8452/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
}
My app uses a Python backend so when I'm running locally I need to proxy my requests to a different port than what Webpack is running on.
I've tried several different ways of making this work:
devServer: {
contentBase: outDir,
proxy: [
{
path: "**",
target: "http://localhost:8000",
secure: false,
bypass: function(req, res, options) {
if(req.url === '' || req.url === '/') {
res.statusCode = 302;
res.setHeader('Location', '/a/');
return '/a/';
}
var frontend = new RegExp("^\/$^|\/a\/index\.html|^\/a\/|^\/a$|^\/styleguide");
if (frontend.test(req.url)) return req.url;
}
}
],
// serve index.html for all 404 (required for push-state)
historyApiFallback: true,
},
And this:
proxy: [{
context: '/',
target: 'http://localhost:8000',
}],
Both of those will at least show a message similar to this when it starts up: [HPM] Proxy created: ** -> http://localhost:8000. When I look at the docs and do something like this, it doesn't work either (I don't even get a message about the proxy running):
proxy: {
"/": "http://localhost:8000"
}
Is there something obvious I'm doing wrong? I'be been trying every combination that I can think of to make it work.
Try to add changeOrigin: true. Don't forget to change API pattern.
proxy: {
'/api/**': {
target: 'http://localhost:8000',
secure: false,
changeOrigin: true
},
}