I created a new #angular/cli project and added one http GET call in the root component. Without using a proxy this works fine.
export class AppComponent implements OnInit {
constructor(private http: Http) {}
ngOnInit() {
this.http
.get('https://dog.ceo/api/breeds/list/all')
.map(response => response.json())
.subscribe(data => console.log(data));
}
}
When I try to add the configure as describe in the Angular CLI wiki things go wrong.
My proxy.conf.json file:
{
"/api": {
"target": "https://dog.ceo",
"secure": false
}
}
I changed the URL in the component to /api/breeds/list/all. And I ran ng serve --proxy-config proxy.conf.json
Then I'm gertting Internal Server Error message in my browsers console. And in the terminal where I started ng serve I'm getting this message [HPM] Error occurred while trying to proxy request /api/breeds/list/all from localhost:4200 to https://dog.ceo (EPROTO)
(https://nodejs.org/api/errors.html#errors_common_system_errors)
I have tried several other configuration options and multiple API's. Results are similar.
The complete code is available on GitHub: https://github.com/ErikNijland/angular-cli-proxy-test
Versions used:
#angular/cli: 1.3.0
NodeJS: v8.1.4
Note: I understand that #angular/cli is using Webpack. Which in turn is using http-proxy-middleware.
I think it is happening because of the origin your are asking https from http. This can be solved using a flag in your proxy.
{
"/api": {
"target": "https://dog.ceo",
"secure": false,
"changeOrigin": true
}
}
Related
After setting up a proxy using Vite, it only proxies GET and HEAD requests.
I need other methods to also be proxied.
on a fresh vite react project - only thing I touched was vite.config.ts
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/test': {
target: 'http://jsonplaceholder.typicode.com',
rewriteHost: true,
}
}
}
})
curl -X POST localhost:3000/test causes the following log message when run with vite --debug
vite:html-fallback Not rewriting POST /test because the method is not GET or HEAD. +1ms
But instead I expected this to POST to https://google.com/test
I solved it. The above config actually works. I found the error at the very top of the logs when starting the server. (in my case it was a bunch of DNS stuff I did not understand when proxying to Google - changeing to the example on vite's page worked)
I think as soon as you use a Regex - it only allows GET or HEAD. (unsure - but not using a regex fixed it for me)
I have 2 apps running on different ports.
API - http://localhost:3000
UI - http://localhost:3001
UI is running via dev mode of parcel.
I need to forward all requests from UI app (3001) to API (3000)
I tried to use .proxyrc approach
https://parceljs.org/features/development/#.proxyrc-%2F-.proxyrc.json
with next configuration:
{
"/api": {
"target": "http://localhost:3000/",
"changeOrigin": true
}
}
Also, I tried using .proxyrc.js https://parceljs.org/features/development/#.proxyrc.js
const { createProxyMiddleware } = require("http-proxy-middleware")
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "http://localhost:3000/",
changeOrigin: true,
})
);
};
Unfortunately every time I get such an error when a request comes:
console: [HPM] Error occurred while proxying request localhost:3001/api/v2/client-config to http://localhost:3000/ [ECONNRESET] (https://nodejs.org/api/errors.html#errors_common_system_errors)
Other team members with Debian and other linuxes have no such issues.
Could someone help me with that please ?
OS: Debian GNU/Linux 11 (bullseye)
nvm: 0.39.1
node: v14.18.2
npm: 8.3.1
http-proxy-middleware: ^2.0.6
Proxy error: Could not proxy request /api/v1/products from
localhost:3000 to http://192.168.137.1:4000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ETIMEDOUT).
this error keep on coming.
Frontend -> React
Backend-> Express, nodejs
I faced a similar issue but in the Mac machine. I changed localhost to 127.0.0.1 and that worked for me.
For Windows:
"proxy": {
"/auth/google": {
"target": "localhost:5000"
}
}
For Mac:
"proxy": {
"/auth/google": {
"target": "http://127.0.0.1:5000"
}
}
I just changed "proxy": "http://192.168.137.1:4000" to "proxy": "127.0.0.1:4000" and this worked for me now...
This is done on windows
I have a spring boot back-end api and I am trying to call a service for uploading or getting images from angular project. I have a standard proxy.conf.json file:
{
"/api": {
"target": "localhost:8080",
"secure": false,
"logLevel": "debug"
}
}
if my angular service is using Http(HttpModule) everything is ok, but since its deprecated and i want to do it the new way i am trying with HttpClient(HttpClientModule) but in log i am getting :
[HPM] Error occurred while trying to proxy request /upload/ from localhost:4200 to localhost:8080 (ENOTFOUND) (https://nodejs.org/api/errors.html#errors_common_system_errors)
and it is not working. On one try on a linux machine i got the same mistake but with (EINVAL). Can someone guide me what i am doing wrong ? Sorry if the question is stupid there are a few questions like this one but neither of their solutions does not seem to work in my case.
Try to set http protocol in front of the localhost link.
{
"/api": {
"target": "http://localhost:8080",
"secure": false,
"logLevel": "debug"
}
}
I have a simple web app built using the angular CLI. I want it to communicate with a backend using web sockets. I have the backend already written and have tested with a simple index.html page that the server can send and receive on sockets.
In my angular-cli project I have setup a proxy config file to setup a proxy to the backend.
proxy.conf.json
{
"/sock": {
"target": "http://localhost:3000",
"changeOrigin": true,
"ws": true,
"logLevel": "debug"
}
}
Then start the server with the following.
ng serve --proxy-config proxy.conf.json
For now I have a service that simply attempts to open a socket and send a fixed string which I'm expecting to see logged by the backend.
import { Injectable } from '#angular/core';
import * as io from 'socket.io-client';
#Injectable()
export class ChatService {
private socket: any;
constructor() {
this.socket = io({ 'path': '/sock' });
this.socket.emit('chat message', 'Hello World from browser!');
}
}
Note: I've had several go's at this with and without the /sock part of the url.
I start both servers. Get no console errors in the browser. But in the angular CLI web pack server I get the following messages.
10% building modules 2/2 modules 0 active[HPM] Proxy created: /sock -> http://localhost:3000
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
[HPM] GET /sockjs-node/530/z1z3teld/websocket -> http://localhost:3000
[HPM] Upgrading to WebSocket
[HPM] Error occurred while trying to proxy request /sockjs-node/530/z1z3teld/websocket from localhost:4200 to http://localhost:3000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
Are web sockets supported or have I made a silly mistake?
Thanks
I managed to figure it out with a bit of trial and error. I looked at the console for the basic index.html page that works within the backend project. This backend project is basically the chat server demo application on the socket.io website. I noticed that when it opens up the web socket the url looks like the following:
http://localhost:3000/socket.io/EIO=3&transport=websocket&sid=wTvdQTclHXJSUmAmAAAA
So back in the angular CLI project I modified my proxy config to include the /socket.io/ part plus also added a wildcard.
{
"/sock/*": {
"target": "http://localhost:3000/socket.io/",
"ws": true,
"logLevel": "debug"
}
}
Bingo! Now when the service is constructed it opens the socket and emits a message which I can see logged in the backend.