ด้วยangular-cli ng serveเซิร์ฟเวอร์ dev ภายในเครื่องจะให้บริการไฟล์แบบคงที่ทั้งหมดจากไดเรกทอรีโครงการของฉัน

ฉันจะพร็อกซีการเรียก AJAX ไปยังเซิร์ฟเวอร์อื่นได้อย่างไร

อัพเดท 2017

ขณะนี้มีเอกสารที่ดีขึ้นและคุณสามารถใช้ทั้งการกำหนดค่าตาม JSON และ JavaScript: พร็อกซีเอกสารเชิงมุม

ตัวอย่างการกำหนดค่าพร็อกซี https

{
  "/angular": {
     "target":  {
       "host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

สำหรับความรู้ของฉันเกี่ยวกับ Angular 2.0 release ไม่แนะนำให้ตั้งค่าพร็อกซีโดยใช้ไฟล์ .ember-cli อย่างเป็นทางการเหมือนด้านล่าง

1. แก้ไข"start"ของคุณpackage.jsonเพื่อดูด้านล่าง

   "start": "ng serve --proxy-config proxy.conf.json",

2. สร้างไฟล์ใหม่ที่เรียกว่าproxy.conf.jsonในรูทของโปรเจ็กต์และภายในไฟล์นั้นจะกำหนดพร็อกซีของคุณดังต่อไปนี้

   {
     "/api": {
       "target": "http://api.yourdomai.com",
       "secure": false
     }
   }
   

3. สิ่งสำคัญคือคุณใช้npm startแทนng serve

อ่านเพิ่มเติมจากที่นี่: Proxy Setup Angular 2 cli

ฉันจะอธิบายสิ่งที่คุณต้องรู้ในตัวอย่างด้านล่าง:

{
  "/folder/sub-folder/*": {
    "target": "http://localhost:1100",
    "secure": false,
    "pathRewrite": {
      "^/folder/sub-folder/": "/new-folder/"
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

1. / folder / sub-folder / *: path บอกว่า: เมื่อฉันเห็นพา ธ นี้ในแอพเชิงมุมของฉัน (สามารถเก็บพา ธ ได้ทุกที่) ฉันต้องการทำอะไรบางอย่างกับมัน อักขระ * ระบุว่าทุกสิ่งที่อยู่ถัดจากโฟลเดอร์ย่อยจะรวมอยู่ด้วย ตัวอย่างเช่นหากคุณมีแบบอักษรหลายแบบใน/ โฟลเดอร์ / โฟลเดอร์ย่อย / * จะเลือกแบบอักษรทั้งหมด

2. "target" : "http: // localhost: 1100" สำหรับเส้นทางด้านบนทำให้ URL เป้าหมายเป็นโฮสต์ / แหล่งที่มาดังนั้นในพื้นหลังเราจะมี http: // localhost: 1100 / folder / sub-folder /

3. "pathRewrite ": {"^ / ​​folder / sub-folder /": "/ new-folder /"} สมมติว่าคุณต้องการทดสอบแอปของคุณในเครื่อง URL http: // localhost: 1100 / folder / sub -folder / อาจมีเส้นทางที่ไม่ถูกต้อง: / โฟลเดอร์ / โฟลเดอร์ย่อย /. คุณต้องการเปลี่ยนเส้นทางนั้นเป็นเส้นทางที่ถูกต้องซึ่งก็คือ http: // localhost: 1100 / new-folder / ดังนั้น pathRewrite จะมีประโยชน์ จะไม่รวมเส้นทางในแอป (ด้านซ้าย) และรวมเส้นทางที่เขียนใหม่ (ด้านขวา)

4. "ปลอดภัย" : แสดงว่าเรากำลังใช้ http หรือ https หากใช้ https ในแอตทริบิวต์เป้าหมายให้ตั้งค่าแอตทริบิวต์ที่ปลอดภัยเป็น true หรือตั้งค่าเป็นเท็จ

5. "changeOrigin" : อ็อพชันจำเป็นก็ต่อเมื่อเป้าหมายโฮสต์ของคุณไม่ใช่สภาพแวดล้อมปัจจุบันตัวอย่างเช่น localhost หากคุณต้องการเปลี่ยนโฮสต์เป็นwww.something.comซึ่งจะเป็นเป้าหมายในพร็อกซีให้ตั้งค่าแอตทริบิวต์ changeOrigin เป็น "true":

6. "logLevel" : แอตทริบิวต์ระบุว่าผู้พัฒนาต้องการแสดงพร็อกซีบนเทอร์มินัล / cmd ของเขาดังนั้นเขาจะใช้ค่า "debug" ตามที่แสดงในภาพ

โดยทั่วไปพร็อกซีจะช่วยในการพัฒนาแอปพลิเคชันภายในเครื่อง คุณกำหนดเส้นทางไฟล์สำหรับวัตถุประสงค์ในการผลิตและหากคุณมีไฟล์เหล่านี้ทั้งหมดภายในโปรเจ็กต์ของคุณคุณก็สามารถใช้พร็อกซีเพื่อเข้าถึงได้โดยไม่ต้องเปลี่ยนเส้นทางแบบไดนามิกในแอปของคุณ

หากใช้งานได้คุณจะเห็นสิ่งนี้ใน cmd / terminal ของคุณ

นี่ใกล้จะทำงานให้ฉันแล้ว ยังต้องเพิ่ม:

"changeOrigin": true,
"pathRewrite": {"^/proxy" : ""}

เต็มรูปแบบproxy.conf.jsonที่แสดงด้านล่าง:

{
    "/proxy/*": {
        "target": "https://url.com",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/proxy": ""
        }
    }
}

แก้ไข: ไม่ทำงานอีกต่อไปในปัจจุบัน ANGULAR-CLI

ดูคำตอบจาก @imal hasaranga perera สำหรับวิธีการแก้ปัญหาที่ทันสมัย

เซิร์ฟเวอร์ในangular-cliมาจากember-cliโครงการ ในการกำหนดค่าเซิร์ฟเวอร์ให้สร้าง.ember-cliไฟล์ในรูทโปรเจ็กต์ เพิ่มการกำหนดค่า JSON ของคุณที่นั่น:

{
   "proxy": "https://api.example.com"
}

รีสตาร์ทเซิร์ฟเวอร์และจะพร็อกซีคำขอทั้งหมดที่นั่น

ตัวอย่างเช่นฉันทำคำขอญาติในรหัสของฉันไปซึ่งจะถูกหยิบขึ้นมาที่/v1/foo/123https://api.example.com/v1/foo/123

คุณยังสามารถใช้แฟล็กเมื่อคุณเริ่มเซิร์ฟเวอร์: ng serve --proxy https://api.example.com

ปัจจุบันสำหรับเวอร์ชัน angular-cli: 1.0.0-beta.0

นี่คืออีกวิธีหนึ่งในการพร็อกซีเมื่อคุณต้องการความยืดหยุ่นมากขึ้น:

คุณสามารถใช้ตัวเลือก "เราเตอร์" และรหัสจาวาสคริปต์เพื่อเขียน URL เป้าหมายใหม่แบบไดนามิก สำหรับสิ่งนี้คุณต้องระบุไฟล์ javascript แทนไฟล์ json เป็นพารามิเตอร์ --proxy-conf ในรายการพารามิเตอร์สคริปต์ 'start' ของคุณ:

"start": "ng serve --proxy-config proxy.conf.js --base-href /"

ดังที่แสดงไว้ด้านบนพารามิเตอร์ --base-href ยังต้องตั้งค่าเป็น / ถ้าคุณตั้งค่า <base href = "... "> เป็นเส้นทางใน index.html ของคุณ การตั้งค่านี้จะลบล้างสิ่งนั้นและจำเป็นต้องตรวจสอบให้แน่ใจว่า URL ในคำขอ http สร้างขึ้นอย่างถูกต้อง

จากนั้นคุณต้องมีเนื้อหาต่อไปนี้หรือเนื้อหาที่คล้ายกันใน proxy.conf.js ของคุณ (ไม่ใช่ json!):

const PROXY_CONFIG = {
    "/api/*": {
        target: https://www.mydefaulturl.com,
        router: function (req) {
            var target = 'https://www.myrewrittenurl.com'; // or some custom code
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

โปรดทราบว่าตัวเลือกเราเตอร์สามารถใช้ได้สองวิธี หนึ่งคือเมื่อคุณกำหนดอ็อบเจ็กต์ที่มีคู่คีย์ค่าโดยที่คีย์คือโฮสต์ / พา ธ ที่ร้องขอเพื่อจับคู่และค่าคือ URL เป้าหมายที่เขียนใหม่ อีกวิธีหนึ่งคือเมื่อคุณกำหนดฟังก์ชันด้วยโค้ดที่กำหนดเองซึ่งเป็นสิ่งที่ฉันแสดงให้เห็นในตัวอย่างของฉันที่นี่ ในกรณีหลังนี้ฉันพบว่าตัวเลือกเป้าหมายยังคงต้องตั้งค่าเป็นบางอย่างเพื่อให้ตัวเลือกเราเตอร์ทำงานได้ หากคุณกำหนดฟังก์ชันแบบกำหนดเองให้กับตัวเลือกเราเตอร์ระบบจะไม่ใช้ตัวเลือกเป้าหมายดังนั้นจึงสามารถตั้งค่าเป็นจริงได้ มิฉะนั้นจะต้องเป็น URL เป้าหมายเริ่มต้น

Webpack ใช้ http-proxy-middleware ดังนั้นคุณจะพบเอกสารที่มีประโยชน์ที่นี่: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

ตัวอย่างต่อไปนี้จะได้รับชื่อผู้พัฒนาจากคุกกี้เพื่อกำหนด URL เป้าหมายโดยใช้ฟังก์ชันที่กำหนดเองเป็นเราเตอร์:

const PROXY_CONFIG = {
    "/api/*": {
        target: true,
        router: function (req) {
            var devName = '';
            var rc = req.headers.cookie;
            rc && rc.split(';').forEach(function( cookie ) {
                var parts = cookie.split('=');
                if(parts.shift().trim() == 'dev') {
                    devName = decodeURI(parts.join('='));
                }
            });
            var target = 'https://www.'+ (devName ? devName + '.' : '' ) +'mycompany.com'; 
            //console.log(target);
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

(คุกกี้ถูกตั้งค่าสำหรับ localhost และ path '/' และมีการหมดอายุเป็นเวลานานโดยใช้ปลั๊กอินของเบราว์เซอร์หากไม่มีคุกกี้ URL จะชี้ไปที่ไซต์ที่ใช้งานอยู่)

เราสามารถค้นหาเอกสารพร็อกซีสำหรับ Angular-CLI ได้ที่นี่:

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

หลังจากตั้งค่าไฟล์ชื่อ proxy.conf.json ในโฟลเดอร์รูทของคุณแล้วให้แก้ไข package.json ของคุณเพื่อรวมการกำหนดค่าพร็อกซีเมื่อเริ่มต้น ng หลังจากเพิ่ม "start": "ng serve --proxy-config proxy.conf.json" ในสคริปต์ของคุณแล้วให้เรียกใช้ npm start และไม่ใช่ ng serve เพราะจะไม่สนใจการตั้งค่าแฟล็กใน package.json ของคุณ

เวอร์ชันปัจจุบันของ angular-cli: 1.1.0

สิ่งสำคัญคือต้องทราบว่าเส้นทางพร็อกซีจะต่อท้ายสิ่งที่คุณกำหนดค่าเป็นเป้าหมายของคุณ ดังนั้นการกำหนดค่าเช่นนี้:

{
  "/api": {
    "target": "http://myhost.com/api,
    ...
  }
}

และคำขอเช่นจะมีผลในการเรียกไปยังhttp://localhost:4200/api http://myhost.com/api/apiฉันคิดว่าเจตนาในที่นี้คือการไม่มีสองเส้นทางที่แตกต่างกันระหว่างการพัฒนาและสภาพแวดล้อมการผลิต สิ่งที่คุณต้องทำคือใช้/apiเป็น URL พื้นฐานของคุณ

ดังนั้นวิธีที่ถูกต้องคือใช้ส่วนที่มาก่อนพา ธ api ในกรณีนี้คือที่อยู่โฮสต์เท่านั้น:

{
  "/api": {
    "target": "http://myhost.com",
    ...
  }
}

ในกรณีที่มีคนกำลังมองหารายการบริบทหลายรายการไปยังเป้าหมายเดียวกันหรือการกำหนดค่าตาม TypeScript

proxy.conf.ts

const proxyConfig = [
  {
    context: ['/api/v1', '/api/v2],
    target: 'https://example.com',
    secure: true,
    changeOrigin: true
  },
  {
    context: ['**'], // Rest of other API call
    target: 'http://somethingelse.com',
    secure: false,
    changeOrigin: true
  }
];

module.exports = proxyConfig;

ng ให้บริการ --proxy-config =. / proxy.conf.ts -o

ขั้นตอนที่ 1: ไปที่โฟลเดอร์รูทของคุณสร้างproxy.conf.json

{
  "/auth/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

ขั้นตอนที่ 2: ไปที่package.jsonค้นหา "scripts" ภายใต้นั้นค้นหา "start"

"start": "ng serve --proxy-config proxy.conf.json",

ขั้นตอนที่ 3: ตอนนี้เพิ่ม / auth / ในhttpของคุณ

 return this.http
      .post('/auth/register/', { "username": 'simolee12', "email": 'xyz@gmail.com', "password": 'Anything@Anything' });
  }

ขั้นตอนที่ 4: ขั้นตอนสุดท้ายในTerminal run npm start

นี่คือตัวอย่างการทำงานอื่น (@ angular / cli 1.0.4):

proxy.conf.json:

{
  "/api/*" : {
    "target": "http://localhost:8181",
    "secure": false,
    "logLevel": "debug"
  },
  "/login.html" : {
    "target": "http://localhost:8181/login.html",
    "secure": false,
    "logLevel": "debug"
  }
}

ทำงานด้วย:

ng serve --proxy-config proxy.conf.json

ภาพหน้าจอปัญหา Cors-origin

พบปัญหา Cors ในแอปพลิเคชันของฉัน อ้างอิงภาพหน้าจอด้านบน หลังจากเพิ่มปัญหาการกำหนดค่าพร็อกซีได้รับการแก้ไขแล้ว url แอปพลิเคชันของฉัน: localhost: 4200 และการขอ url api: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

อนุญาตให้ใช้สิทธิ์ no-cors ด้าน API และฉันไม่สามารถเปลี่ยนปัญหาคอร์ในฝั่งเซิร์ฟเวอร์ได้และฉันต้องเปลี่ยนเฉพาะในเชิงมุม (ฝั่งไคลเอ็นต์)

ขั้นตอนในการแก้ไข:

1. สร้างไฟล์ proxy.conf.json ภายในโฟลเดอร์ src

   {
      "/maps/*": {
        "target": "http://www.datasciencetoolkit.org",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
      }
    }

2. ในคำขอ Api

this.http
      .get<GeoCode>('maps/api/geocode/json?sensor=false&address=' + cityName)
      .pipe(
        tap(cityResponse => this.responseCache.set(cityName, cityResponse))
      );

หมายเหตุ: เรามีการข้ามชื่อโฮสต์ url ในคำขอ Api ซึ่งจะเพิ่มอัตโนมัติในขณะที่ส่งคำขอ เมื่อใดก็ตามที่เปลี่ยน proxy.conf.js เราต้องรีสตาร์ท ng-serve จากนั้นจะอัปเดตการเปลี่ยนแปลงเท่านั้น

3. กำหนดค่าพร็อกซีใน angular.json

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

หลังจากเสร็จสิ้นขั้นตอนเหล่านี้ให้รีสตาร์ท ng-serve Proxy ทำงานได้อย่างถูกต้องตามที่คาดไว้โปรดดูที่นี่

> WARNING in
> D:\angular\Divya_Actian_Assignment\src\environments\environment.prod.ts
> is part of the TypeScript compilation but it's unused. Add only entry
> points to the 'files' or 'include' properties in your tsconfig.
> ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** : Compiled
> successfully. [HPM] GET
> /maps/api/geocode/json?sensor=false&address=chennai ->
> http://www.datasciencetoolkit.org

1. เพิ่มใน proxy.conf.json

{
  "/api": {
    "target": "http://targetIP:9080",
    "secure": false,
    "pathRewrite": {"^/proxy" : ""},
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

2. ใน package.json ให้ทำ "start": "ng serve --proxy-config proxy.conf.json"

3. ในรหัสให้ url = "/ api / clnsIt / dev / 78"; URL นี้จะถูกแปลเป็น http: // targetIP: 9080 / api / clnsIt / dev / 78