कोणीय-क्ली सर्वर - एपीआई एपीआई दूसरे सर्वर से कैसे अनुरोध करता है?

Question 1

साथ angular-cli ng serveस्थानीय डेव सर्वर, यह मेरी परियोजना निर्देशिका से सभी स्थैतिक फ़ाइलें सर्व है।

मैं अपने AJAX को एक अलग सर्वर पर कैसे कॉल कर सकता हूं?

Question 2

UPDATE 2017

बेहतर प्रलेखन अब उपलब्ध है और आप JSON और जावास्क्रिप्ट आधारित कॉन्फ़िगरेशन दोनों का उपयोग कर सकते हैं: कोणीय-क्ले प्रलेखन प्रॉक्सी

नमूना https प्रॉक्सी कॉन्फ़िगरेशन

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

कोणीय 2.0 रिलीज के साथ मेरी जानकारी के लिए .ember-cli फ़ाइल का उपयोग कर प्रॉक्सी की स्थापना की सिफारिश नहीं की जाती है। आधिकारिक तरीका नीचे की तरह है

नीचे देखने के लिए "start"आपका संपादनpackage.json

"start": "ng serve --proxy-config proxy.conf.json",
proxy.conf.jsonप्रोजेक्ट के मूल में एक नई फ़ाइल बनाई गई है और उसके अंदर नीचे की तरह अपने परदे के पीछे परिभाषित करें
```
{
  "/api": {
    "target": "http://api.yourdomai.com",
    "secure": false
  }
}
```
महत्वपूर्ण बात यह है कि आप npm startइसके बजाय उपयोग करते हैंng serve

यहां से और पढ़ें: प्रॉक्सी सेटअप कोणीय 2 क्ली

Question 3

मैं आपको बताऊंगा कि आपको नीचे दिए उदाहरण पर क्या जानना चाहिए :

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

/ फ़ोल्डर / उप-फ़ोल्डर / * : पथ कहता है: जब मैं अपने कोणीय अनुप्रयोग के अंदर इस पथ को देखता हूं (पथ कहीं भी संग्रहीत किया जा सकता है) मैं इसके साथ कुछ करना चाहता हूं। * चरित्र इंगित करता है कि सब कुछ जो उप-फ़ोल्डर का पालन करता है, उसमें शामिल होगा। उदाहरण के लिए, यदि आपके पास / फ़ोल्डर / उप-फ़ोल्डर / के अंदर कई फोंट हैं , तो * उन सभी को उठाएगा
"लक्ष्य" : " http: // localhost: 1100 " ऊपर के पथ के लिए लक्ष्य URL को होस्ट / स्रोत बनाते हैं , इसलिए पृष्ठभूमि में हमारे पास http: // localhost: 1100 / folder / sub-folder / होगा
"pathRewrite ": {"^ / folder / sub-folder /": "/ new-folder /"}, अब मान लें कि आप अपने आवेदन का स्थानीय स्तर पर परीक्षण करना चाहते हैं, http: // localhost: 1100 / folder / sub- फ़ोल्डर / शायद एक अमान्य पथ शामिल हैं: / फ़ोल्डर / उप-फ़ोल्डर /। आप इस पथ को एक सही पथ में बदलना चाहते हैं जो http: // localhost: 1100 / new-folder / है , इसलिए pathRewrite बहुत उपयोगी हो जाएगा। यह एप्लिकेशन (बाईं ओर) में पथ को बाहर करेगा और नव लिखित एक (दाईं ओर) शामिल करेगा
"सिक्योर" : वेदर का प्रतिनिधित्व करता है जिसका हम http या https का उपयोग कर रहे हैं। यदि https का उपयोग लक्ष्य विशेषता में किया जाता है, तो सुरक्षित विशेषता को सही पर सेट करें अन्यथा इसे गलत पर सेट करें
"changeOrigin" : विकल्प केवल तभी आवश्यक है जब आपका होस्ट लक्ष्य वर्तमान वातावरण नहीं है, उदाहरण के लिए: लोकलहोस्ट। यदि आप होस्ट को www.something.com पर बदलना चाहते हैं जो प्रॉक्सी में लक्ष्य होगा तो चेंजऑर्गिन विशेषता को "सही" पर सेट करें:
"logLvel" : विशेषता निर्दिष्ट करती है कि डेवलपर अपने टर्मिनल / cmd पर प्रॉक्सी को आउटपुट करना चाहता है, इसलिए वह छवि पर दिखाए गए अनुसार "डीबग" मान का उपयोग करेगा।

सामान्य तौर पर, प्रॉक्सी स्थानीय रूप से एप्लिकेशन को विकसित करने में मदद करता है। आप अपने फ़ाइल पथों को उत्पादन के उद्देश्य के लिए सेट करते हैं और यदि आपके पास अपनी परियोजना के अंदर स्थानीय रूप से ये सभी फाइलें हैं, तो आप अपने ऐप में गतिशील रूप से पथ को बदले बिना उन्हें एक्सेस करने के लिए प्रॉक्सी का उपयोग कर सकते हैं।

यदि यह काम करता है, तो आपको अपने cmd / टर्मिनल में कुछ इस तरह से देखना चाहिए।

Question 4

यह मेरे लिए काम करने के करीब था। भी जोड़ना था:

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

proxy.conf.jsonनीचे पूरा दिखाया गया है:

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

Question 5

संपादित करें: यह कनिष्ठ अंगुली-सीएलआई में कोई लंबा काम नहीं करता है

अप-टू-डेट समाधान के लिए @ हिमालयी हसरंगा परेरा से उत्तर देखें

सर्वर परियोजना angular-cliसे आता है ember-cli। सर्वर को कॉन्फ़िगर करने के लिए, .ember-cliप्रोजेक्ट रूट में एक फ़ाइल बनाएं । वहां अपना JSON कॉन्फिगर जोड़ें:

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

सर्वर को पुनरारंभ करें और यह वहां सभी अनुरोधों को प्रॉक्सी करेगा।

उदाहरण के लिए, मैं अपने कोड में सापेक्ष अनुरोध कर रहा हूं /v1/foo/123, जिसे उठाया जा रहा है https://api.example.com/v1/foo/123।

सर्वर शुरू करने पर आप एक ध्वज का उपयोग भी कर सकते हैं: ng serve --proxy https://api.example.com

कोणीय-क्ली संस्करण के लिए वर्तमान: 1.0.0-Beta.0

Question 6

जब आपको अधिक लचीलेपन की आवश्यकता होती है, तो यह एक और तरीका है:

आप लक्ष्य URL को गतिशील रूप से फिर से लिखने के लिए 'राउटर' विकल्प और कुछ जावास्क्रिप्ट कोड का उपयोग कर सकते हैं। इसके लिए, आपको एक जैसन फ़ाइल के बजाय एक जावास्क्रिप्ट फ़ाइल निर्दिष्ट करनी होगी - आपकी 'आरंभ' स्क्रिप्ट पैरामीटर सूची में --proxy-conf पैरामीटर:

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

जैसा कि ऊपर दिखाया गया है, --base-href पैरामीटर को भी सेट करना होगा / यदि आप अन्यथा अपने base.html में पथ के लिए <आधार href = "..."> सेट करें। यह सेटिंग ओवरराइड हो जाएगी और यह सुनिश्चित करने के लिए आवश्यक है कि http अनुरोधों में URL सही तरीके से बनाए गए हैं।

फिर आपको अपने छद्म में निम्नलिखित या समान सामग्री की आवश्यकता है ।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 होना चाहिए।

वेबपैक http-प्रॉक्सी-मिडलवेयर का उपयोग करता है इसलिए आपको वहां उपयोगी दस्तावेज मिलेंगे: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-midware-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;

(कुकी लोकलहोस्ट और पथ '/' के लिए सेट की गई है और ब्राउज़र प्लगइन का उपयोग करते हुए एक लंबी समाप्ति के साथ है। अगर कुकी मौजूद नहीं है, तो URL लाइव साइट को इंगित करेगा।)

Question 7

हम यहाँ पर कोणीय-सीएलआई के लिए छद्म प्रलेखन पा सकते हैं:

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

अपने रूट फ़ोल्डर मेंxy.conf.json नामक फाइल सेट करने के बाद, एनजी स्टार्ट पर प्रॉक्सी कॉन्फिगर को शामिल करने के लिए अपने पैकेज को संपादित करें। "स्टार्ट": "एनजी सर्व --प्रोक्सी-कॉन्फिडेंट प्रॉक्सी.कॉन्फ़.जोन" को अपनी स्क्रिप्ट में जोड़ने के बाद, एनपीएम प्रारंभ करें और एनजी सर्व न करें, क्योंकि यह आपके पैकेज में ध्वज सेटअप की उपेक्षा करेगा।

कोणीय-क्ली का वर्तमान संस्करण: 1.1.0

Question 8

यह ध्यान रखना महत्वपूर्ण है कि आपके द्वारा अपने लक्ष्य के रूप में कॉन्फ़िगर किए गए प्रॉक्सी पथ को जोड़ दिया जाएगा । तो इस तरह एक विन्यास:

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

और जैसे अनुरोध के http://localhost:4200/apiपरिणामस्वरूप कॉल किया जाएगा http://myhost.com/api/api। मुझे लगता है कि विकास और उत्पादन पर्यावरण के बीच दो अलग-अलग रास्ते नहीं हैं। आपको केवल /apiअपने आधार URL के रूप में उपयोग करने की आवश्यकता है ।

तो सही तरीका यह होगा कि आप केवल उस पथ का उपयोग करें जो एपीआई पथ से पहले आता है, इस मामले में सिर्फ मेजबान का पता:

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

Question 9

चरण 1: अपने रूट फ़ोल्डर में जाएं प्रॉक्सी बनाएं ।conf.json

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

स्निपेट का विस्तार करें

चरण 2: Package.json पर जाएं "स्क्रिप्ट" ढूंढें "खोज" के तहत

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

स्निपेट का विस्तार करें

चरण 3: अब अपने http में / or / जोड़ें

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

स्निपेट का विस्तार करें

चरण 4: टर्मिनल रन एनपीएम स्टार्ट में अंतिम चरण

Question 10

यदि कोई व्यक्ति एक ही लक्ष्य या टाइपस्क्रिप्ट आधारित कॉन्फ़िगरेशन के लिए कई संदर्भ प्रविष्टियों की तलाश में है।

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;

एनजी सर्व --proxy-config = /xy.conf.ts-o

Question 11

यहाँ एक और उदाहरण काम कर रहा है (@ कोणीय / cli 1.0.4):

xy.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

Question 12

Cors- मूल मुद्दा स्क्रीनशॉट

मेरे आवेदन में कॉर्स मुद्दे का सामना किया गया है। स्क्रीनशॉट के ऊपर देखें। प्रॉक्सी कॉन्फ़िगर करने के बाद समस्या हल हो गई है। मेरा आवेदन url: localhost: 4200 और api url का अनुरोध: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

आपी पक्ष नो-कोर्स की अनुमति दी। और यह भी कि मैं सर्वर-साइड में कॉर्स-इश्यू को बदलने में सक्षम नहीं हूं और मुझे केवल कोणीय (क्लाइंट साइड) में बदलना पड़ा।

हल करने के लिए कदम:

src फ़ोल्डर के अंदरxy.conf.json फ़ाइल बनाएँ।

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

आपी के अनुरोध में

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

नोट: हमने Api अनुरोध में hostname नाम url को छोड़ दिया है, यह अनुरोध देते समय ऑटो जोड़ देगा। जब भी प्रॉक्सी बदलते हुए .conf.js को हमें एनजी-सर्व को पुनः आरंभ करना होगा, तब केवल परिवर्तन अपडेट होंगे।

प्रॉक्सी को 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"
            }
          }
        },

इन चरणों को पूरा करने के बाद, एनजी-सर्व को पुनः आरंभ करें, प्रॉक्सी को सही ढंग से काम करते हुए, यहाँ देखें

> 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

Question 13

प्रॉक्सी में जोड़ें ।conf.json

{ "/api": { "target": "http://targetIP:9080", "secure": false, "pathRewrite": {"^/proxy" : ""}, "changeOrigin": true, "logLevel": "debug" } }
1. in package.json, बनाओ "start": "ng serve --proxy-config proxy.conf.json"
2. कोड में url = "/ api / clnsIt / dev / 78"; इस url का अनुवाद http: // targetIP: 9080 / api / clnsIt / dev / 78 से किया जाएगा