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

[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 ומחליף במחרוזת ריקה.