לא מצליח לשלוח headers באנגולר

avi rz

@yossiz אמר בלא מצליח לשלוח headers באנגולר:

אחרי שאתה עושה מה ש-@dovid אמר, אתה צריך לשלוח בקשות לפורט של הפרונט אנד, לא ל-3000. אולי לא עשית את זה?

הוי אומר?

yossiz

@avi-rz במקום:

this.http.post<any>(`${this.settingsService.event.pathServer}sessions/test/`, { userName: 'avi' }, { headers });

תכתוב:

this.http.post<any>('/sessions/test/', { userName: 'avi' }, { headers });

avi rz

@yossiz אמר בלא מצליח לשלוח headers באנגולר:

@avi-rz במקום:

this.http.post<any>(`${this.settingsService.event.pathServer}sessions/test/`, { userName: 'avi' }, { headers });

תכתוב:

this.http.post<any>('/sessions/test/', { userName: 'avi' }, { headers });

אז הוא שלוח את זה לעצמו,

message: "Http failure response for http://localhost:4200/sessions/test/: 404 Not Found"
name: "HttpErrorResponse"
ok: false
status: 404
statusText: "Not Found"
url: "http://localhost:4200/sessions/test/"

yossiz

@avi-rz לא הגדרת את הפרוקסי נכון. תעבור על התיעוד ש-@dovid הביא

avi rz

@yossiz אמר בלא מצליח לשלוח headers באנגולר:

התיעוד ש-@dovid הביא

Add the following content to the new proxy file:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

In the CLI configuration file, angular.json, add the proxyConfig option to the serve target:

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

Rewrite the URL path

The pathRewrite proxy configuration option lets you rewrite the URL path at run time. For example, you can specify the following pathRewrite value to the proxy configuration to remove "api" from the end of a path.

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

If you need to access a backend that is not on localhost, set the changeOrigin option as well. For example:

{
  "/api": {
    "target": "http://npmjs.org",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }
}

מה שאני כתבתי:

קובץ: "proxy.conf.json" הנמצא ב src

{
  "/api": {
    "target": "http://localhost:3000/",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

קובץ: "angular.json" שנמצא מחוץ ל src

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "love-volunteers:build",
            "proxyConfig": "src/proxy.conf.json"
          },

וכשאני מפעיל npm start
זה מפעיל גם את הפרוקסי.

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config src/proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

פספסתי משהו?

yossiz

@avi-rz מכיון שהגדרת את הפרוקסי על נתיב api/ אתה צריך להוסיף קידומת זו לכל קריאה לשרת.

האם זה עובד:

this.http.post<any>('/api/sessions/test/', { userName: 'avi' }, { headers });

?

avi rz

@yossiz אמר בלא מצליח לשלוח headers באנגולר:

@avi-rz מכיון שהגדרת את הפרוקסי על נתיב api/ אתה צריך להוסיף קידומת זו לכל קריאה לשרת.

האם זה עובד:
this.http.post<any>('/api/sessions/test/', { userName: 'avi' }, { headers });
?

error:

message: "Http failure response for http://localhost:4200/api/sessions/test/: 504 Gateway Timeout"
name: "HttpErrorResponse"
ok: false
status: 504
statusText: "Gateway Timeout"
url: "http://localhost:4200/api/sessions/test/"

גם בטרמינל הוא הדפיס לי שגיאה:

[HPM] Error occurred while trying to proxy request /sessions/test/ from localhost:4200 to http://localhost:3000/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

avi rz

@avi-rz
סליחה!
לא שמתי לב השרת שלי היה "סגור",

תודה רבה ממש - זה עובד!
לגבי ה"api" איך אני מבטל אותו?
ברגע שאני יעלה את זה לשרת ואני לא יצטרך את כל הפרוקסי, אני יצטרך לעבור על כל הבקשות למחוק את ה "api" שאני אכתוב לפני כל בקשה?

dovid

@avi-rz
אתה כבר טיפלת בזה בהגדרה של pathRewrite.
תסתכל שוב בתיעוד תחת הכותרת
Rewrite the URL path
זה כלל שמוחק מהURL את החלק הלא רלוונטי באמת לשרת הסופי, ושהוא רק לצרכי זיהוי להעברה.
הגדרת את זה כבר כאמור כפי שצריך.

קצת פצעי אוהב: מקוה שיש לך מסקנות על צורת התגלגלות הנושא פה: תיצמד פחות לאבחנות שלך ותהיה יותר פתוח לשמוע וללמוד, וכמובן לא לפחד לשאול ובתדירות גבוהה יותר. תפציץ.
אבל אני חייב לציין לשבח את כל הפלט וההגדרות שהבאת ללא עצלות (אולי זה גורם לך לשאול הרבה פחות, גם אם כן זה שווה), היפך "הנחמדים" שכותבים "עדיין לא עובד" ותו לא.
נ.ב. אפשר להעתיק מקונסול (בוחרים ואז CTRL+SHIFT+C), לא כדאי אף פעם להביא תמונות של קוד.

avi rz

@dovid אמר בלא מצליח לשלוח headers באנגולר:

אתה כבר טיפלת בזה בהגדרה של pathRewrite.

נכון, זה מה שציינתי, ולכן הבאתי את התיעוד הזה ג"כ כאן

@avi-rz אמר בלא מצליח לשלוח headers באנגולר:

Rewrite the URL path

The pathRewrite proxy configuration option lets you rewrite the URL path at run time. For example, you can specify the following pathRewrite value to the proxy configuration to remove "api" from the end of a path.

                                                                                                                            {                                                                                                                                                                              "/api": {                                                                                                                                                                                "target": "http://localhost:3000",                                                                                                                                                                                "secure": false,                                                                                                                                                                                "pathRewrite": {                                                                                                                                                                                  "^/api": ""                                                                                                                                                                                }                                                                                                                                                                              }                                                                                                                                                                            }

If you need to access a backend that is not on localhost, set the changeOrigin option as well. For example:

                                                                                                                            {                                                                                                                                                                              "/api": {                                                                                                                                                                                "target": "http://npmjs.org",                                                                                                                                                                                "secure": false,                                                                                                                                                                                "pathRewrite": {                                                                                                                                                                                  "^/api": ""                                                                                                                                                                                },                                                                                                                                                                                "changeOrigin": true                                                                                                                                                                              }                                                                                                                                                                            }

אבל זה לא עבד לי, עד שלא הוספתי את הapi כמו שיוסי אמר,

@yossiz אמר בלא מצליח לשלוח headers באנגולר:

האם זה עובד:
this.http.post<any>('/api/sessions/test/', { userName: 'avi' }, { headers });

למה באמת?

@dovid אמר בלא מצליח לשלוח headers באנגולר:

נ.ב. אפשר להעתיק מקונסול (בוחרים ואז CTRL+SHIFT+C), לא כדאי אף פעם להביא תמונות של קוד.

אכן, (עובד לי ctrl+c לבד) -מה שהבאתי למעלה זה לא שגיאה שצריך להעתיק או משהו, רק בסה"כ ראיה למה שכתבתי כל הזמן - ורציתי להמחיש. - עכ"פ ממש תודה על ההכוונה.

dovid

@avi-rz אני אחזור בקצרה על ה"תכנית" של הפתרון, ציפיתי שתקרא ותבין לבד אבל אולי זה מסובך פעם ראשונה.
יש לנו שתי שרתים, אחד לקבצים הסטטיים (פורט 4000) והשני לדינמיות (3000).
כיון שבד"כ כשנגמור את הפיתוח זה יהיה שרת אחד, אז אנחנו רוצים כבר עכשיו לדמות שזה שרת אחד.
איך אפשר? הולכים לשרת א' שזה הserve של אנגולר (4000), ומבקשים ממנו לטפל גם בבקשות המופנות לשרת ב' (זה נקרא פרוקסי, כי הוא לא באמת יודע מה לעשות, הוא יפנה לשרת ה3000 ויקבל את התשובה ויחזיר אותה ללקוח כאילו בשם עצמו כמו עיתונאי עלוב). כעת נחוץ להגדיר לו שני דברים א. איך לזהות בקשה שממוענת לשרת ב' (שיידע לא לחפש לזה קובץ או ניתוב אנגולרי), ב. איפה השרת ב' כדי להעביר לו את הבקשה ולקבל את התשובה ולהחזיר אותה לדפדפן.

אז א' מבוצע בקובץ proxy.conf.json ע"י המאפיין "/api" שמשמעותו: טיפול מיוחד בבקשה שמתחילה ב/api.
לכן עליך לערוך את כל הבקשות המופנות לשרת (3000), ולדאוג שהם לא יפנו לשרת 3000 (אלא לכתובת הנוכחית, אותו שרת של הקבצים הסטטיים) רק שיתחילו עם api למען הזיהוי שהם בעצם צריכים להיות מופנים.
אם באמת כל הכתובות היו מתחילות בapi בשרת ה3000, אז פה היינו מסיימים. הבעיה שזה תוספת ששמנו רק לזיהוי עבור הserve של אנגולר שיידע איזה כתובת לטפל כפרוקסי, ובאמת אנחנו צריכים בקוד של השרת שלנו לקבל את הכתובת ללא הapi!
לכן יש את הpathRewrite שמבצע חיפוש והחלפה, מחפש את api ומחליף במחרוזת ריקה.

תחומים - פורום חרדי מקצועי

לא מצליח לשלוח headers באנגולר