İle angular-cli ng serveyerel dev sunucuda, bu benim proje dizinden tüm statik dosyaları hapis yatıyor.

AJAX aramalarımı farklı bir sunucuya nasıl vekalet edebilirim?

GÜNCELLEME 2017

Artık daha iyi belgeler mevcuttur ve hem JSON hem de JavaScript tabanlı yapılandırmaları kullanabilirsiniz: açısal-cli belgeleri proxy'si

örnek https proxy yapılandırması

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

Bildiğim kadarıyla Angular 2.0 sürümü .ember-cli dosyasını kullanarak proxy'lerin kurulması önerilmez. resmi yol aşağıdaki gibidir

1. aşağıya bakmak "start"için senin düzenlemepackage.json

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

2. proxy.conf.jsonprojenin kökünde çağrılan yeni bir dosya oluşturun ve bunun içinde vekillerinizi aşağıdaki gibi tanımlayın

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

3. Önemli olan şey, bunun npm startyerine kullanmanızdırng serve

Buradan daha fazlasını okuyun: Proxy Setup Angular 2 cli

Umarım ne anlatacağım bilmek gerekir Aşağıdaki örnekte tarih:

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

1. / klasör / alt klasör / *: yol diyor ki: Bu yolu açısal uygulamamın içinde gördüğümde (yol herhangi bir yerde saklanabilir) onunla bir şeyler yapmak istiyorum. * Karakteri, alt klasörden sonraki her şeyin dahil edileceğini belirtir. Örneğin, / klasör / alt klasör / içinde birden fazla yazı tipiniz varsa , * hepsini alır

2. Yukarıdaki yol için "target" : "http: // localhost: 1100", hedef URL'yi ana bilgisayar / kaynak yapar, bu nedenle arka planda http: // localhost: 1100 / klasör / alt klasör /

3. "pathRewrite ": {"^ / ​​klasör / alt klasör /": "/ yeni-klasör /"}, Şimdi uygulamanızı yerel olarak test etmek istediğinizi varsayalım, url http: // localhost: 1100 / klasör / alt -folder / geçersiz bir yol içerebilir: / klasör / alt klasör /. Bu yolu http: // localhost: 1100 / new-folder / olan doğru bir yolla değiştirmek istiyorsunuz, bu nedenle pathRewrite yararlı olacaktır. Uygulamadaki yolu (sol taraf) hariç tutacak ve yeni yazılan yolu (sağ taraf) içerecektir.

4. "güvenli" : http veya https kullanıp kullanmadığımızı gösterir. Hedef özellikte https kullanılıyorsa, secure özelliğini true olarak ayarlayın, aksi takdirde false olarak ayarlayın.

5. "changeOrigin" : seçenek yalnızca ana bilgisayar hedefiniz mevcut ortam değilse gereklidir, örneğin: localhost. Ana bilgisayarı , proxy'deki hedef olacak www.something.com olarak değiştirmek istiyorsanız , changeOrigin özelliğini "true" olarak ayarlayın:

6. "logLevel" : öznitelik, geliştiricinin kendi terminalinde / cmd'sinde proxy kullanmak isteyip istemediğini belirtir, bu nedenle resimde gösterildiği gibi "hata ayıklama" değerini kullanır

Genel olarak proxy, uygulamanın yerel olarak geliştirilmesine yardımcı olur. Dosya yollarınızı üretim amacıyla ayarlarsınız ve tüm bu dosyalara projenizin içinde yerel olarak sahipseniz, uygulamanızdaki yolu dinamik olarak değiştirmeden bunlara erişmek için yalnızca proxy kullanabilirsiniz.

Çalışıyorsa, cmd / terminalinizde buna benzer bir şey görmelisiniz.

Bu benim için çalışmaya yakındı. Ayrıca eklemek zorunda kaldı:

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

Tam proxy.conf.jsonaşağıda gösterilmiştir:

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

DÜZENLEME: BU ARTIK GÜNCEL ANGULAR-CLI'DA ÇALIŞMAZ

Güncel çözüm için @imal hasaranga perera'nın cevabına bakınız.

Gelen sunucu projeden angular-cligeliyor ember-cli. Sunucuyu yapılandırmak için .ember-cliproje kök dizininde bir dosya oluşturun . JSON yapılandırmanızı oraya ekleyin:

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

Sunucuyu yeniden başlatın ve oradaki tüm istekleri proxy yapacaktır.

Örneğin /v1/foo/123, kodumda, alınmakta olan ilgili isteklerde bulunuyorum https://api.example.com/v1/foo/123.

Sunucuyu başlattığınızda da bir bayrak kullanabilirsiniz: ng serve --proxy https://api.example.com

Açısal-kli versiyonu için güncel: 1.0.0-beta.0

Daha fazla esnekliğe ihtiyaç duyduğunuzda proxy yapmanın başka bir yolu:

Hedef URL'yi dinamik olarak yeniden yazmak için 'yönlendirici' seçeneğini ve bazı javascript kodunu kullanabilirsiniz. Bunun için, 'start' komut dosyası parametre listenizde --proxy-conf parametresi olarak bir json dosyası yerine bir javascript dosyası belirtmeniz gerekir:

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

Yukarıda gösterildiği gibi, --base-href parametresinin de <base href = "..."> 'i index.html'nizdeki bir yola ayarlarsanız / olarak ayarlanması gerekir. Bu ayar bunu geçersiz kılar ve http isteklerindeki URL'lerin doğru bir şekilde yapılandırıldığından emin olmak gerekir.

O zaman proxy.conf.js dosyanızda aşağıdaki veya benzer içeriğe ihtiyacınız var (json değil!):

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;

Yönlendirici seçeneğinin iki şekilde kullanılabileceğini unutmayın. Birincisi, anahtarın eşleşmek için istenen ana bilgisayar / yol ve değerin yeniden yazılan hedef URL olduğu anahtar değer çiftlerini içeren bir nesne atadığınızda. Diğer bir yol ise, bazı özel kodlarla bir işlev atadığınızda, buradaki örneklerimde gösterdiğim şey budur. İkinci durumda, yönlendirici seçeneğinin çalışması için hedef seçeneğinin hala bir şeye ayarlanması gerektiğini buldum. Yönlendirici seçeneğine özel bir işlev atarsanız, hedef seçeneği kullanılmaz, bu nedenle yalnızca doğru olarak ayarlanabilir. Aksi takdirde, varsayılan hedef URL olması gerekir.

Webpack, http-proxy-middleware kullanır, böylece orada yararlı belgeler bulabilirsiniz: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

Aşağıdaki örnek, yönlendirici olarak özel bir işlev kullanarak hedef URL'yi belirlemek için geliştirici adını bir çerezden alacaktır:

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;

(Çerez, localhost ve yol '/' için ayarlanmıştır ve bir tarayıcı eklentisi kullanılarak uzun bir süre sona ermelidir. Çerez mevcut değilse, URL canlı siteyi gösterecektir.)

Angular-CLI için proxy belgelerini burada bulabiliriz:

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

Kök klasörünüzde proxy.conf.json adlı bir dosya kurduktan sonra, package.json dosyanızı proxy yapılandırmasının başlangıcını içerecek şekilde düzenleyin. Komut dosyalarınıza "start": "ng serve --proxy-config proxy.conf.json" ekledikten sonra, npm start'ı çalıştırın, çünkü bu, package.json'unuzdaki bayrak kurulumunu yok sayacaktır.

angular-cli'nin güncel sürümü: 1.1.0

Proxy yolunun , hedefiniz olarak yapılandırdığınız her şeye ekleneceğini unutmamak önemlidir . Yani bunun gibi bir konfigürasyon:

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

ve benzer bir istek http://localhost:4200/api, bir çağrı ile sonuçlanacaktır http://myhost.com/api/api. Bence buradaki amaç, geliştirme ve üretim ortamı arasında iki farklı yola sahip olmamak. Tek yapmanız gereken kullanmak/api , temel URL'niz olarak .

Dolayısıyla doğru yol, api yolundan önce gelen kısmı, bu durumda sadece ana bilgisayar adresini kullanmak olacaktır:

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

Birisinin aynı hedefe veya TypeScript tabanlı konfigürasyona birden fazla bağlam girişi araması durumunda.

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 hizmet --proxy-config =. / proxy.conf.ts -o

Adım 1: Kök klasörünüze gidin proxy.conf.json oluşturun

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

2. Adım: package.json adresine gidin ve "start" ı bulmanın altındaki "betikleri" bulun

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

3. Adım: Şimdi senin içinde / auth / add http

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

Adım 4: Terminal çalıştırmada Son Adım npm start

İşte başka bir çalışma örneği (@ 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"
  }
}

ile çalıştırın:

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

Cors kaynaklı sorun ekran görüntüsü

Başvurumda Cors sorunu yaşandı. yukarıdaki ekran görüntüsüne bakın. Proxy yapılandırması eklendikten sonra sorun çözüldü. benim uygulama url: localhost: 4200 ve api url istiyor: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

Api tarafında cors yok iznine izin verilir. Ayrıca sunucu tarafında cors sorununu değiştiremiyorum ve sadece açısal (istemci tarafında) değiştirmek zorunda kaldım.

Çözülecek adımlar:

1. src klasörü içinde proxy.conf.json dosyası oluşturun.

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

2. API isteğinde

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

Not: Api isteğinde ana bilgisayar adı url'sini atladık, istek verirken otomatik olarak eklenecektir. proxy.conf.js değiştirildiğinde, ng-hizmetini yeniden başlatmamız gerekir, bu durumda yalnızca değişiklikler güncellenecektir.

3. Angular.json'da proxy'yi yapılandırma

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

Bu adımı tamamladıktan sonra , beklendiği gibi doğru şekilde çalışan ng-hizmet Proxy'sini yeniden başlatın, buraya bakın

> 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 ekleyin

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

2. package.json içinde, make "start": "ng serve --proxy-config proxy.conf.json"

3. kodda let url = "/ api / clnsIt / dev / 78"; bu url http: // targetIP: 9080 / api / clnsIt / dev / 78'e çevrilecektir.