Dengan angular-cli ng serveserver dev lokal, ini melayani semua file statis dari direktori proyek saya.

Bagaimana cara saya membuat proxy panggilan AJAX saya ke server yang berbeda?

UPDATE 2017

Dokumentasi yang lebih baik sekarang tersedia dan Anda dapat menggunakan konfigurasi berbasis JSON dan JavaScript: proxy dokumentasi angular-cli

contoh konfigurasi proxy https

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

Sepengetahuan saya dengan rilis Angular 2.0, menyiapkan proxy menggunakan file .ember-cli tidak disarankan. cara resminya seperti di bawah ini

1. edit "start"Anda package.jsonuntuk melihat di bawah

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

2. buat file baru bernama proxy.conf.jsonroot proyek dan di dalamnya tentukan proxy Anda seperti di bawah ini

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

3. Yang penting adalah bahwa Anda menggunakan npm startbukannyang serve

Baca lebih lanjut dari sini: Proxy Setup Angular 2 cli

Saya akan menjelaskan apa yang perlu Anda ketahui pada contoh di bawah ini:

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

1. / folder / sub-folder / *: path mengatakan: Ketika saya melihat jalur ini di dalam aplikasi sudut saya (jalur dapat disimpan di mana saja), saya ingin melakukan sesuatu dengannya. Karakter * menunjukkan bahwa semua yang mengikuti sub-folder akan disertakan. Misalnya, jika Anda memiliki banyak font di dalam / folder / sub-folder / , * akan mengambil semuanya

2. "target" : "http: // localhost: 1100" untuk jalur di atas jadikan URL target sebagai host / sumber, oleh karena itu di latar belakang kita akan memiliki http: // localhost: 1100 / folder / sub-folder /

3. "pathRewrite ": {"^ / ​​folder / sub-folder /": "/ new-folder /"}, Sekarang katakanlah Anda ingin menguji aplikasi Anda secara lokal, url http: // localhost: 1100 / folder / sub -folder / mungkin berisi jalur yang tidak valid: / folder / sub-folder /. Anda ingin mengubah path tersebut ke path yang benar yaitu http: // localhost: 1100 / new-folder /, oleh karena itu pathRewrite akan berguna. Ini akan mengecualikan jalur di aplikasi (sisi kiri) dan menyertakan yang baru ditulis (sisi kanan)

4. "aman" : menunjukkan apakah kita menggunakan http atau https. Jika https digunakan di atribut target, setel atribut aman ke benar, jika tidak, setel ke salah

5. "changeOrigin" : opsi hanya diperlukan jika target host Anda bukan lingkungan saat ini, misalnya: localhost. Jika Anda ingin mengubah host menjadi www.something.com yang akan menjadi target di proxy, setel atribut changeOrigin ke "true":

6. "logLevel" : atribut menentukan apakah pengembang ingin menampilkan proxy pada terminal / cmd-nya, maka dia akan menggunakan nilai "debug" seperti yang ditunjukkan pada gambar

Secara umum, proxy membantu dalam mengembangkan aplikasi secara lokal. Anda menyetel jalur file Anda untuk tujuan produksi dan jika Anda memiliki semua file ini secara lokal di dalam proyek Anda, Anda dapat menggunakan proxy untuk mengaksesnya tanpa mengubah jalur secara dinamis di aplikasi Anda.

Jika berhasil, Anda akan melihat sesuatu seperti ini di cmd / terminal Anda.

Ini hampir berhasil bagi saya. Juga harus menambahkan:

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

Penuh proxy.conf.jsonditunjukkan di bawah ini:

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

EDIT: INI TIDAK LAGI BEKERJA DI ANGULAR-CLI SAAT INI

Lihat jawaban dari @imal hasaranga perera untuk solusi terkini

Server masuk angular-cliberasal dari ember-cliproyek. Untuk mengkonfigurasi server, buat .ember-clifile di root proyek. Tambahkan konfigurasi JSON Anda di sana:

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

Mulai ulang server dan itu akan membuat proxy semua permintaan di sana.

Misalnya, saya membuat permintaan relatif dalam kode saya ke /v1/foo/123, yang diambil di https://api.example.com/v1/foo/123.

Anda juga dapat menggunakan bendera saat Anda memulai server: ng serve --proxy https://api.example.com

Saat ini untuk versi angular-cli: 1.0.0-beta.0

Berikut cara lain untuk melakukan proxy saat Anda membutuhkan lebih banyak fleksibilitas:

Anda dapat menggunakan opsi 'router' dan beberapa kode javascript untuk menulis ulang URL target secara dinamis. Untuk ini, Anda perlu menentukan file javascript dan bukan file json sebagai parameter --proxy-conf di daftar parameter script 'start':

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

Seperti yang ditunjukkan di atas, parameter --base-href juga perlu disetel ke / jika Anda menyetel <base href = "..."> ke jalur di index.html Anda. Pengaturan ini akan menimpanya dan penting untuk memastikan URL dalam permintaan http dibuat dengan benar.

Maka Anda memerlukan konten berikut atau serupa di proxy.conf.js Anda (bukan 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;

Perhatikan bahwa opsi router dapat digunakan dengan dua cara. Salah satunya adalah ketika Anda menetapkan objek yang berisi pasangan nilai kunci di mana kuncinya adalah host / jalur yang diminta untuk dicocokkan dan nilainya adalah URL target yang ditulis ulang. Cara lain adalah ketika Anda menetapkan fungsi dengan beberapa kode khusus, yang saya tunjukkan dalam contoh saya di sini. Dalam kasus terakhir saya menemukan bahwa opsi target masih perlu disetel ke sesuatu agar opsi router berfungsi. Jika Anda menetapkan fungsi kustom ke opsi router maka opsi target tidak digunakan sehingga bisa disetel ke true. Jika tidak, ini harus menjadi URL target default.

Webpack menggunakan http-proxy-middleware sehingga Anda akan menemukan dokumentasi yang berguna di sana: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

Contoh berikut akan mendapatkan nama pengembang dari cookie untuk menentukan URL target menggunakan fungsi khusus sebagai router:

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;

(Cookie disetel untuk localhost dan jalur '/' dan dengan masa kedaluwarsa yang lama menggunakan plugin browser. Jika cookie tidak ada, URL akan mengarah ke situs aktif.)

Kami dapat menemukan dokumentasi proxy untuk Angular-CLI di sini:

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

Setelah menyiapkan file bernama proxy.conf.json di folder root Anda, edit package.json Anda untuk menyertakan konfigurasi proxy saat memulai. Setelah menambahkan "start": "ng serve --proxy-config proxy.conf.json" ke skrip Anda, jalankan npm start dan bukan ng serve, karena itu akan mengabaikan penyiapan flag di package.json Anda.

versi angular-cli: 1.1.0

Penting untuk dicatat bahwa jalur proxy akan ditambahkan ke apa pun yang Anda konfigurasikan sebagai target Anda. Jadi konfigurasinya seperti ini:

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

dan permintaan suka http://localhost:4200/apiakan menghasilkan panggilan ke http://myhost.com/api/api. Saya pikir maksudnya di sini adalah untuk tidak memiliki dua jalur yang berbeda antara lingkungan pengembangan dan produksi. Yang perlu Anda lakukan hanyalah menggunakan/api URL dasar Anda.

Jadi cara yang benar adalah dengan menggunakan bagian yang ada sebelum jalur api, dalam hal ini hanya alamat host:

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

Jika seseorang mencari beberapa entri konteks ke target yang sama atau konfigurasi berbasis 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 melayani --proxy-config =. / proxy.conf.ts -o

Langkah 1: Buka folder root Anda Buat proxy.conf.json

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

Langkah 2: Buka package.json temukan "scripts" di bawahnya, temukan "start"

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

Langkah 3: sekarang tambahkan / auth / di http Anda

 return this.http
      .post('/auth/register/', { "username": 'simolee12', "email": '[email protected]', "password": 'Anything@Anything' });
  }

Langkah 4: Langkah Terakhir di Terminal jalankan npm start

Berikut adalah contoh kerja lainnya (@ 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"
  }
}

dijalankan dengan:

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

Tangkapan layar masalah asal Cors

Masalah Cors telah dihadapi dalam aplikasi saya. lihat screenshot di atas. Setelah menambahkan masalah konfigurasi proxy telah diselesaikan. url aplikasi saya: localhost: 4200 dan meminta url api: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

Izin sisi api tanpa cors diperbolehkan. Dan juga saya tidak dapat mengubah masalah cors di sisi server dan saya harus mengubah hanya dalam sudut (sisi klien).

Langkah-langkah penyelesaian:

1. buat file proxy.conf.json di dalam folder src.

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

2. Dalam permintaan Api

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

Catatan: Kami telah melewatkan url nama host dalam permintaan Api, itu akan otomatis ditambahkan saat memberikan permintaan. setiap kali mengubah proxy.conf.js kita harus memulai ulang ng-serve, lalu hanya perubahan yang akan diperbarui.

3. Config proxy di 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"
            }
          }
        },

Setelah menyelesaikan langkah ini, restart ng-serve Proxy bekerja dengan benar seperti yang diharapkan, lihat di sini

> 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. tambahkan proxy.conf.json

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

2. di package.json, buat "start": "ng serve --proxy-config proxy.conf.json"

3. dalam kode let url = "/ api / clnsIt / dev / 78"; url ini akan diterjemahkan ke http: // targetIP: 9080 / api / clnsIt / dev / 78