Im trying to use the following code as a reverse proxy. So when I set my pc'ed proxy settings to that, it would redirect Any url to the file.html. But when I type www. in-front of the domain I get error "ERR_EMPTY_RESPONSE" Without the subdomain "www" It works fine. Why is this? And how do I fix it?
expressApp.set('port', 6968);
expressApp.use(bodyParser.json());
expressApp.use(bodyParser.urlencoded({ extended: true }));
expressApp.get('/', function (req, res) {
res.sendFile('./file.html', {root: __dirname});
});
var server = expressApp.listen(6968);
Related
So on my dev env, I have a React Server on localhost:3000 and a NodeJs server on localhost:5000.
I have used createProxyMiddleware in React to configure the requests. Here is my config:
const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function (app) {
app.use(createProxyMiddleware('/auth/google', {target: 'http://localhost:5000'}));
app.use(createProxyMiddleware('/auth/currentUser', {target: 'http://localhost:5000'}));
app.use(createProxyMiddleware('/api/*', {target: 'http://localhost:5000'}));
}
All of these routes work without any problems. For example I have a route like localhost:3000/api/list which gets routed to localhost:5000/api/list.
But now I have a route like localhost:3000/api/list/3132133ffdvf. The random string is some id. This above route does not get proxied. It gives me a 404.
Why is this happening? It shouldn't happen since I have created a proxy for /api/*. Can someone help me out?
The wildcard (*) only matches one directory level. This means that it matches /api/list but not /api/list/id, since the latter has two levels.
Either remove the wildcard, or use a globstar (**):
app.use(createProxyMiddleware('/api', {target: 'http://localhost:5000'}));
or
app.use(createProxyMiddleware('/api/**', {target: 'http://localhost:5000'}));
I have a React app running successfully locally and all api requests are successfully running from a separate server.
When I run a build, the path to the api server is lost and no data is loaded.
Below are a few screenshots...
Loading data successfully from api.
Pointing IIS to react /build folder using localhost:80. No data loading.
Here is an example of an api call in my node/express server/index.js file
app.get('/api/company', (req, res) => {
api_helper.GET('https://****/api/company')
.then(response => {
res.json(response)
})
.catch(error => {
res.send(error)
})
})
My package.json file has the url of the express proxy (running in the background).
"proxy": "http://localhost:5000/",
My question is, why isnt the api loading in production /build? I just get this...
Request URL: http://localhost/api/site
Request Method: GET
Status Code: 404 Not Found
Remote Address: [::1]:80
Referrer Policy: no-referrer-when-downgrade
but when just running locally (npm start) I get this and data loads from api.
Request URL: http://localhost:3000/api/site
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade
Any help appreciated, driving me mad! Thanks.
After much testing I discovered, you must put the routes before
Wrong Example:
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.use('/', routes);
Right Example:
app.use('/api', routes);
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
For anyone else struggling with this, I figured it out..
I had to add this to my express server.js file in the root folder of my project.
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
I then pointed to the address where express is running, in my case http://localhost:5000
This worked.
I also then set up a rewrite rule in IIS to point localhost and our domain name to localhost:5000
All working now, hope it helps someone else.
Thanks for your info. I am quite new to ReactJS and I also encountered similar problems when I created my production build. Actually I had added similar things like
app.use(express.static(<build_folder_dir>));
in my Express Server before then I came to search and see your post. Anyway, I did not add something like the second line of your code and my API calls are written in router created in a separate js file.
app.use('/api/some_path', <imported_router>);
In the exported router object, codes are written like this:
router.get('/some_sub-path')
To make API calls, I used axios in my react app
axios.get(
"/api/some_path"+"/sub-path?param_1="+<param_value>,
{
headers:{
"Content-Type":"application/json",
<some headers>
}
}
).then((res)=>{<Some codes using the res.data.<any param in body>>})
Finally,I added these lines in the server.js
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, <path of the index.html in the build dir>), function(err) {
if (err) {
res.status(500).send(err)
}
})
})
Yet, I made a stupid mistake that my app crashed because the app.get overwrite the settings in router. Just a reminder, if you enable any API calls in GET method, use regex to exclude the pattern for making API calls.
On my local host directory '/form' is working, page is rendering.
But when I deploy on firebase it's given me 404.
If I change 404 file itself, I can see a changes. I clear a cache, restart nothing help.
Please advice whats wrong.
Here is backend code
app.use(express.static(path.join(__dirname, 'bower_components')));
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({extended: true}));
app.get('/', function(req, res){
res.sendFile('/index.html');
});
app.get('/form', function(req,res){
res.sendFile(path.join(__dirname + '/public/form.html'));
});
It's happend with me too, basically the firebase changing the "backend url" to localhost or just ignoring it.
I am setting up proxy server using NODE and EXPRESS. I have the same setup/codebase in local and proxy server. But i want to use all the js,css,images and other static content from local machine and json response from proxy server. Now since the proxy server also has same ,js,css,images, it is picking up everything from proxy. Do I need to restrict urls calls to not pick js,css,images and other static content from proxy but from local. How do i do that? Here is the code structure (both in local and proxy)
/src
/javacode
/WebContent
/js
/css
/images
/jsp
I want everything under /WebContent to be used from local.
This is how i setup proxy:
var proxy = httpProxy.createProxyServer();
app.route('/app/*$').all(function (req, res) { // proxy all requests
proxy.web(req, res, {target: 'http://proxy-server:7001'}); //sandbox
});
Given your file structure, you can use express.static to map your static /WebContent dir to a WebContent virtual path, like this:
var proxy = httpProxy.createProxyServer();
app.use('/app/js', express.static('WebContent/js'));
app.use('/app/css', express.static('WebContent/css'));
app.use('/app/etc', express.static('WebContent/etc'));
app.route('/app/*$').all(function (req, res) { // proxy all requests
proxy.web(req, res, {target: 'http://proxy-server:7001'}); //sandbox
});
I use grunt-contrib-connect to serve as my front end server(http://127.0.0.1:8888) and express as my backend server(http://127.0.0.1:3000). The front framework is Ember.And I did the cross domain visit by adding Access-Control-Allow-Origin and Access-Control-Allow-Methods to all the req. Now I call:
$.getJSON({
url: http://127.0.0.1:3000/index?callback=?
});
And the /index cgi code is:
router.get('/index', function(req, res) {
var cb = req.params.callback;
res.send(cb({name:'test'}));
});
The browser's console printed an error:
GET http://127.0.0.1:8888/[object%20Object] 404(Not Found)
This wrong url is not my cgi url, how did it exist here?
What can I do to solve this issue?
Thank you
getJSON takes a string, not a hash $.getJSON('http://127.0.0.1:3000/index?callback=foobar');