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

dovid

@avi-rz ראשית אני מתחנן בפניך לדעת לשאול.
אתה כעת רק ב"דרך אגב" למדת איך לבדוק משהו אלמנטרי ביותר, לראות מה השגיאה בקונסול בכלי המפתחים (למעשה לא עשית את זה עד עכשיו, אפילו לא חשבתי על זה).
זה קורה לא בגלל שאתה טיפש, ולא בגלל שאתה נחשל, אלא כי אתה לא שואל ואתה בטוח שזה עבירה על החוק לחשוף מה אתה לא יודע, ו/או לא מתאים לך לקרוא מדריכים לדברים פשוטים.
אתה מתכנת מוכשר, רואים את זה, אבל אם תפרוץ ולו במעט את תכונותיך הטבעיות, תגיע רחוק פי כמה.
.
כעת לתשובה, מה זה הCORS הזה, ואיך פותרים אותו.

מה זה: הCORS זה הגנה ברמת דפדפן, על מי? על המשתמש. למשל, הדפדפן חושש, שאני בעל האתר תחומים שמתי בקוד האתר בקשת אינטרנט כזו שמנסה בשיטת מצליח לגשת ל50 הודעות אחרונות שקיבל הגולש התורן מgmail. אם הקוד יצליח (כי המשתמש אכן עם חיבור תקף לג'מייל) אני אשלח את התוצאות לשרת שלי, שם אקרא בהנאה את כל הדואר נכנס של כל הגולשים באתר שלי. מה דעתך?
בא הדפדפן המודרני ומגן על המשתמש בו. הוא אומר לקוד שבאתר משהו נורא פשוט. אתה אמור לגשת לכתובות שמתחילות בtchumim.com בלבד, אוקי? אם אתה ניגש לכתובת gmail.com אנחנו נימנע מלהעביר לך את התשובה שתתקבל ויהיה לך שגיאת CORS והקוד ייכשל.
למה להימנע מלהעביר את התשובה ולא להימנע בכלל משליחת הבקשה? כי בתשובה נבדקת אפשרות שהאתר הזר (gmail) אישרו בעצמם גישה מדומיין tchumim למשל בגלל שזה אותו בעלים וכדומה. אז לכן מתקבלת התשובה, הדפדפן בודק אם יש אישור, ואם לא יש CORS.

איך פותרים אותו: נחזור בקצרה על הבעיה, אנחנו בקוד סקריפט שנמצא בדומיין א' רוצים לשלוח בקשות לדומיין ב. אם דומיין ב' בבעלותינו, אנחנו נוכל לשים שמה אישור לדומיין א, ע"י הוספת הידר מתאים בתשובות.
אבל במקרה שלך אני מנחש שהדומיין א' זה בעצם אנגולר ע"י הפקודה serve. במקרה כזה, החיים הרבה יותר קלים. אפשר פשוט להגדיר פרוקסי, שכל בקשה של דומיין ב בעצם תישלח לא ובא' יישלח בקשה בצד שרת (הcli שמריץ את אנגולר) לשרת ב, ואת התשובה הוא יחזיר עם הכותרות המתאימות שהכל יעבוד יופי. התצורה מתוארת פה: https://angular.io/guide/build#proxying-to-a-backend-server תפרט מה שני הדומיינים ואיך הם רצים ואני אשתדל לעזור לך להגדיר הכל נכון.

yossiz

@dovid אני עדיין לא מבין למה הוספת ההידרים היא זו שחשפה את הבעיה. למה הבקשה מצליחה בלי ההידרים?

avi rz

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

@dovid אני עדיין לא מבין למה הוספת ההידרים היא זו שחשפה את הבעיה. למה הבקשה מצליחה בלי ההידרים?

אין לי מושג, יש לי כבר כמה בקשות מהשרת והכל עובד. כשהתחלתי להשתמש בהוספת headers אז זה מתנקש עם השגיאה הזו.

avi rz

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

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

זה בעצם עקיפת האבטחה של השרת המודרני - (כאילו האני שולח ומקבל את הבקשה ולא הדפדפן)?
א"כ למה שליחה לgmail אני לא יוכל לעשות כך? - הcookis לא נשלח בכזו צורה, ו gmail לא יזההו את המשתמש של הדפדפן?

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

תפרט מה שני הדומיינים ואיך הם רצים ואני אשתדל לעזור לך להגדיר הכל נכון.

בינתיים פשוט מאוד,
אנגולר: //localhost:4200
השרת: //localhost:3000
אלא"כ אני ירצה להציג את זה למשיהו, אני יפנה את זה לכתובת ip שלי עם פורטים שונים אולי.

dovid

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

זה בעצם עקיפת האבטחה של השרת המודרני - (כאילו האני שולח ומקבל את הבקשה ולא הדפדפן)?
א"כ למה שליחה לgmail אני לא יוכל לעשות כך? - הcookis לא נשלח בכזו צורה, ו gmail לא יזההו את המשתמש של הדפדפן?

העוגיות כן נשלחות, אבל רק העוגיות של tchumim.... דפדפן בחיים לא ייתן לtchumim עוגיות ששייכות לדומיין אחר, אחרת לא הייתי צריך בכלל קוד זדוני באתר, הייתי לוקח את העוגיות של גולשיי היקרים וגולש איתם בדפדפן שלי במחשב.

בינתיים פשוט מאוד,
אנגולר: //localhost:4200
השרת: //localhost:3000

אז תעשה בדיוק מה שכתוב פה
https://angular.io/guide/build#proxying-to-a-backend-server

avi rz

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

@dovid אני עדיין לא מבין למה הוספת ההידרים היא זו שחשפה את הבעיה. למה הבקשה מצליחה בלי ההידרים?

היה לי בשרת קוד לטיפול בבעיות cors
מצו':

app.use((req, res, next) => {
    console.log(req.headers);
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-with, Content-Type, Accept, Authorization");
    if (req.method === "OPTIONS") {
        res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
        return res.status(200).json({});
    }
    next();
});

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

אז תעשה בדיוק מה שכתוב פה
https://angular.io/guide/build#proxying-to-a-backend-server

עשיתי, וניסיתי עוד כמה פתרונות שמצאתי בחיפוש ברשת,
אך עדיין ללא הועיל,
אני חושב שהבעיה היא:
ברגע שאני מוסיף ההדיר, הוא שולח בצורה שונה ממה שהגדרתי - אני הגדרתי אותו כ "POST", ואני מקבל אותו כ "OPTIONS", ובנוסף לזאת הוא לא שולח את ההידר שהוספתי,
ואת ההוספה עשיתי ג"כ בהרבה אפשרויות שניסו להציע ברשת.
ושום דבר לא עזר,
והנה כשאני מוריד את ההידר, אני מקבל אותו בצורה המתאימה ושולח חזרה מה ששולח,
עד שאני מוסיף את ההידר.
מצו':
קוד שליחה בלי ההידר:

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

צילום קונסול,
קוד שליחה עם ההידר:

    const headers = {
      'user': '1000',
      'strSession': 'Q9w762oUu3S#uwCqjZi@zZxDHl2bd~elw@nDCQVjQle9ACrkuf#JWutV#^S!Y21L7U1Rp8ZZGNlsJ!B1OPKqVbViNwgt4#sBuBCW'
    }

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

צילום קונסול:
(כולל הדפסת ה req.headars)

yossiz

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

בעיות cors

CORS ביסודה היא פתרון - לא בעיה...

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

עשיתי, וניסיתי עוד כמה פתרונות שמצאתי בחיפוש ברשת,
אך עדיין ללא הועיל

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

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

אני הגדרתי אותו כ "POST", ואני מקבל אותו כ "OPTIONS",

זו לא בעיה, זו התנהגות צפויה, בקשות POST מוגדרות כ"לא בטיחותיות" לשלוח בלי לבדוק מקודם מצב ה-CORS, כדי לשלוח בקשת cross origin הדפדפדן תמיד שולח קודם בקשת OPTIONS לבדוק את מצב ה-CORS.

אני לא מבין למה בלי ההידרים הדפדפן לא שולח בקשת OPTIONS?

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 באנגולר