Develop Reference

Why is the proxy inside package.json not working in my React application?

I am currently trying to perform a simple fetch instruction in my React application, though, the actual url always ends up being that of the React application itself.
The React app is hosted at localhost:3000, and the server I am trying to connect to is at localhost:8080.
In the package.json I have a proxy field like so:
"proxy": "http://localhost:8080"
Then I have a fetch somewhere like so:
fetch('/', { /* stuff... */ })
But when I check in my browser it says a fetch request happened to http://localhost:3000; in another application, it used to be that if you had a proxy, this would just go to localhost:8080, but not this time.
I tried stuff like deleting the node_modules folder and package-lock.json, but that did not do anything (also did a npm install afterward). If I do this:
fetch('http://localhost:8080', { /* stuff... */ })
The url seems to be the correct one, though I get all sorts of random errors which I just do not understand:
Access to fetch at 'http://localhost:8080/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I have never heard of CORS, perhaps this is new? So I have two questions really:
How to get my React proxy to work?
How do I get rid of this CORS stuff? I am running both servers myself so "access control checks" is a whole load of bogus...
Cheers!

For the proxy to handle a request, the endpoint you are calling shouldn't be handled by your React development server. For example, instead of fetch('/'), which is the endpoint that sends your React index.html file, your API should be at something like fetch('/api/').
Like the doc says:
To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json, for example: "proxy": "http://localhost:8080".
This way, when you fetch('/api/todos') in development, the development server will recognize that it’s not a static asset, and will proxy your request to http://localhost:8080/api/todos as a fallback. The development server will only attempt to send requests without text/html in its Accept header to the proxy.
If it's still not working, you can switch to configuring the proxy manually, which is the second way to set up a proxy that Create React App talks about.
For that, first, remove the proxy you have in package.json, keep it as it's the rule for the endpoint I talked about above, then:
npm install http-proxy-middleware --save-dev
And finally, create a src/setupProxy.js file:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api', // 👈🏽 your API endpoint goes here.
createProxyMiddleware({
target: 'http://localhost:8080', // 👈🏽 your API URL goes here.
changeOrigin: true,
})
);
};
With that, you should be good to go. And about CORS, it's not new. You can read about it on mdn if you like.

No bro, that's how it's supposed to work. Add a route listener, say "/api", to your server and then call fetch('/api') from the client.
In the browser it will show up as http://localhost:3000/api even though your server is running on 8080.

how can I properly proxy requests to /api/ressource in prod?

I have a webpack dev configuration with my front end dev server running on 8080 and my backed server running on port 3000.
So in dev mode my webpack dev server is configured like follows :
proxy: {
'/api': 'http://localhost:3000',
}
How can I do the same thing in the prod server that serves the built static files of my front end ?
I have the following code for my prod server that serves the static files of my front end :
const proxy = require('http-proxy-middleware')
app.use(express.static(dir))
/**
* Redirect everything that starts with /api/* to the backend rest server
*/
app.use('/api', proxy({ target: backendUrl }))
app.get('*', (req, res) => {
res.sendFile(path.resolve(dir + '/index.html'))
})
This is not working as the cookies seem to be lost with the proxying (unlike with the proxying with webpack where evyrhthing works).
Am I going about this problem in the correct way ?

In this case, you can create a reverse-proxy which is going to receive all the information from the frontend, make the requests to the other address and then return the proper answer to the frontend. I used to develop a lot of these back in the days, there is a package that i created which can help you.
Basically the flow is:
Frontend -> endpoint on your render server (port 8080) -> backend (port 3000) -> render server (port 8080) -> frontend

You can try using:
A server (i.E. nginx) as a reverse proxy.
A node-http-proxy as a reverse proxy.
A vhost middleware if each domain is served from the same Express
codebase and node.js instance.
You may also want to check your cookie flags (changeOrigin, secure, cookieDomainRewrite etc..)
info: IF running http on localhost, the cookie will not be set if secure-flag is present in the response

How to boot up react and node api server on same port?

I built a simple express api server on port 8080. In another port(3000) i am building the client side with react which fetch data from my express api endpoint. For this i will have to run both of these applications on separate port. How can i run both of these in same port eg. 8080?
I am pretty new at this. help would be really appreciated.

1/ If you need them to run on the same port because of CORS issues, it may be easier (and good practice) to set up CORS headers on your API server to allow requests from origin whatever:3000.
2/ To serve both the API and the static pages and scripts on the same port, you can either modify your API server to handle requests for the static content, or use a reverse proxy. I'd recommend nginx to set that up (and to serve the static content too, if you can).
Example nginx config:
location /api/ {
proxy_pass http://localhost:8080/;
}
location / {
proxy_pass http://localhost:3000/;
}

Consume Rest API on same ip but different port

Let's suppose a backend application, which exposes some Rest API, running on a Jetty webserver at address 192.168.1.10:8889.
I would like to have a frontend application (html/javascript only, on a apache2 webserver) running at the same IP but on a different port (e.g. 8000), which should consume the API exposed by the backend application.
How can i get this architecture working without get into "No 'Access-Control-Allow-Origin'" error?

I think that you should install a nginx proxy.
configure it as a reverse proxy you can see documentation here :
https://www.nginx.com/resources/admin-guide/reverse-proxy/
You can search on google for more specific documentation on what you want to do.

Can a proxy (like fiddler) be used with Node.js's ClientRequest

Can node.js be setup to recognize a proxy (like Fiddler for example) and route all ClientRequest's through the proxy?
I am using node on Windows and would like to debug the http requests much like I would using Fiddler for JavaScript in the browser.
Just be clear, I am not trying to create a proxy nor proxy requests received by a server. I want to route requests made by http.request() through a proxy. I would like to use Fiddler to inspect both the request and the response as I would if I was performing the request in a browser.

I find the following to be nifty. The request module reads proxy information from the windows environment variable.
Typing the following in the windows command prompt, will set it for the lifetime of the shell. You just have to run your node app from this shell.
set https_proxy=http://127.0.0.1:8888
set http_proxy=http://127.0.0.1:8888
set NODE_TLS_REJECT_UNAUTHORIZED=0

To route your client-requests via fiddler, alter your options-object like this (ex.: just before you create the http.request):
options.path = 'http://' + options.host + ':' + options.port + options.path;
options.headers.host = options.host;
options.host = '127.0.0.1';
options.port = 8888;
myReq = http.request(options, function (result) {
...
});

If you want to montior outgoing reqeusts from node
you can use the request module
and just set the proxy property in the options, like that
request.post('http://204.145.74.56:3003/test', {
headers :{ 'content-type' : 'application/octet-stream'},
'body' : buf ,
proxy: 'http://127.0.0.1:8888'
}, function() {
//callback
});
8888 is the default port , of fiddler .

process.env.https_proxy = "http://127.0.0.1:8888";
process.env.http_proxy = "http://127.0.0.1:8888";
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";

Answering my own question: according to https://github.com/joyent/node/issues/1514 the answer is no, but you can use the request module, http://search.npmjs.org/#/request, which does support proxies.

If you want to configure a proxy in the general case, the other answers are right: you need to manually configure that for the library you're using as node intentionally ignores your system proxy settings out of the box.
If however you're simply looking for a fiddler-like HTTP debugging tool for Node.js, I've been working on an open-source project to do this for a little while (with built-in node support) called HTTP Toolkit. It lets you
Open a terminal from the app with one click
Start any node CLI/server/script from that terminal
All the HTTP or HTTPS requests it sends get proxied automatically, so you can see and rewrite everything. No code changes or npm packages necessary.
Here's a demo of it debugging a bunch of NPM, node & browser traffic:
Internally, the way this works is that it injects an extra JS script into started Node processes, which hooks into require() to automatically reconfigure proxy settings for you, for every module which doesn't use the global settings.