Với angular-cli ng servemáy chủ nhà phát triển cục bộ, nó phục vụ tất cả các tệp tĩnh từ thư mục dự án của tôi.

Làm cách nào để ủy quyền các cuộc gọi AJAX của tôi đến một máy chủ khác?

CẬP NHẬT 2017

Hiện đã có tài liệu tốt hơn và bạn có thể sử dụng cả cấu hình dựa trên JSON và JavaScript: proxy tài liệu angle-cli

cấu hình proxy https mẫu

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

Theo hiểu biết của tôi với bản phát hành Angular 2.0, thiết lập proxy bằng tệp .ember-cli không được khuyến khích. cách chính thức như dưới đây

1. chỉnh sửa "start"của bạn package.jsonđể nhìn bên dưới

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

2. tạo một tệp mới được gọi proxy.conf.jsontrong thư mục gốc của dự án và bên trong tệp đó xác định các proxy của bạn như bên dưới

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

3. Điều quan trọng là bạn sử dụng npm startthay vìng serve

Đọc thêm từ đây: Thiết lập proxy Angular 2 cli

Tôi sẽ giải thích những gì bạn cần biết trong ví dụ dưới đây:

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

1. / folder / sub-folder / * : path cho biết: Khi tôi nhìn thấy đường dẫn này bên trong ứng dụng góc cạnh của mình (đường dẫn có thể được lưu trữ ở bất kỳ đâu), tôi muốn làm gì đó với nó. Ký tự * chỉ ra rằng mọi thứ theo sau thư mục con sẽ được đưa vào. Ví dụ: nếu bạn có nhiều phông chữ bên trong / thư mục / thư mục con / , dấu * sẽ chọn tất cả chúng

2. "Mục tiêu" : " http: // localhost: 1100 " cho đường dẫn trên đặt URL đích là host / source, do đó trong nền chúng ta sẽ có http: // localhost: 1100 / folder / sub-folder /

3. "pathRewrite ": {"^ / ​​folder / sub-folder /": "/ new-folder /"}, Bây giờ, giả sử bạn muốn kiểm tra cục bộ ứng dụng của mình, http: // localhost: 1100 / folder / sub- thư mục / có thể chứa một đường dẫn không hợp lệ: / thư mục / thư mục con /. Bạn muốn thay đổi đường dẫn này thành một đường dẫn chính xác là http: // localhost: 1100 / new-folder / , do đó pathRewrite sẽ trở nên rất hữu ích. Nó sẽ loại trừ đường dẫn trong ứng dụng (phía bên trái) và bao gồm đường dẫn mới được viết (phía bên phải)

4. "secure" : đại diện cho bộ lọc mà chúng tôi đang sử dụng http hoặc https. Nếu https được sử dụng trong thuộc tính đích thì hãy đặt thuộc tính secure thành true, nếu không hãy đặt thuộc tính false

5. "changeOrigin" : tùy chọn chỉ cần thiết nếu mục tiêu máy chủ của bạn không phải là môi trường hiện tại, ví dụ: localhost. Nếu bạn muốn thay đổi máy chủ lưu trữ thành www.something.com sẽ là đích trong proxy thì hãy đặt thuộc tính changeOrigin thành "true":

6. "mức đăng nhập" : thuộc tính chỉ định mà nhà phát triển muốn xuất proxy trên terminal / cmd của mình, do đó anh ta sẽ sử dụng giá trị "debug" như được hiển thị trên hình ảnh

Nói chung, proxy giúp phát triển ứng dụng cục bộ. Bạn đặt đường dẫn tệp của mình cho mục đích sản xuất và nếu bạn có tất cả các tệp này cục bộ bên trong dự án của mình, bạn chỉ có thể sử dụng proxy để truy cập chúng mà không cần thay đổi đường dẫn động trong ứng dụng của mình.

Nếu nó hoạt động, bạn sẽ thấy một cái gì đó như thế này trong cmd / terminal của bạn.

Điều này gần như làm việc cho tôi. Cũng phải thêm:

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

Hình đầy đủ proxy.conf.jsonbên dưới:

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

CHỈNH SỬA: ĐIỀU NÀY KHÔNG CÒN TÁC DỤNG TRONG ANGULAR-CLI HIỆN NAY

Xem câu trả lời từ @imal hasaranga perera để biết giải pháp cập nhật

Máy chủ angular-cliđến từ ember-clidự án. Để cấu hình máy chủ, hãy tạo một .ember-clitệp trong thư mục gốc của dự án. Thêm cấu hình JSON của bạn vào đó:

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

Khởi động lại máy chủ và nó sẽ ủy quyền tất cả các yêu cầu ở đó.

Ví dụ: tôi đang thực hiện các yêu cầu tương đối trong mã của mình, mã /v1/foo/123này đang được nhận tạihttps://api.example.com/v1/foo/123 .

Bạn cũng có thể sử dụng cờ khi khởi động máy chủ: ng serve --proxy https://api.example.com

Hiện tại cho phiên bản angle-cli: 1.0.0-beta.0

Đây là một cách ủy quyền khác khi bạn cần linh hoạt hơn:

Bạn có thể sử dụng tùy chọn 'bộ định tuyến' và một số mã javascript để viết lại URL mục tiêu động. Đối với điều này, bạn cần chỉ định tệp javascript thay vì tệp json làm tham số --proxy-conf trong danh sách tham số tập lệnh 'start' của bạn:

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

Như được hiển thị ở trên, tham số --base-href cũng cần được đặt thành / nếu bạn đặt <base href = "..."> thành đường dẫn trong index.html của mình. Cài đặt này sẽ ghi đè điều đó và cần phải đảm bảo các URL trong yêu cầu http được tạo chính xác.

Sau đó, bạn cần nội dung sau hoặc nội dung tương tự trong proxy.conf.js của mình (không phải 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;

Lưu ý rằng tùy chọn bộ định tuyến có thể được sử dụng theo hai cách. Một là khi bạn gán một đối tượng có chứa các cặp giá trị khóa trong đó khóa là máy chủ / đường dẫn được yêu cầu để khớp và giá trị là URL đích được viết lại. Cách khác là khi bạn gán một hàm với một số mã tùy chỉnh, đó là những gì tôi đang trình bày trong các ví dụ của tôi ở đây. Trong trường hợp thứ hai, tôi thấy rằng tùy chọn đích vẫn cần được đặt thành một cái gì đó để tùy chọn bộ định tuyến hoạt động. Nếu bạn gán một chức năng tùy chỉnh cho tùy chọn bộ định tuyến thì tùy chọn đích sẽ không được sử dụng vì vậy nó có thể được đặt thành true. Nếu không, nó phải là URL mục tiêu mặc định.

Webpack sử dụng http-proxy-middleware nên bạn sẽ tìm thấy tài liệu hữu ích ở đó: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

Ví dụ sau sẽ lấy tên nhà phát triển từ cookie để xác định URL mục tiêu bằng cách sử dụng chức năng tùy chỉnh làm bộ định tuyến:

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 được đặt cho localhost và đường dẫn '/' và có thời hạn sử dụng lâu dài bằng cách sử dụng plugin trình duyệt. Nếu cookie không tồn tại, URL sẽ trỏ đến trang web đang hoạt động.)

Chúng tôi có thể tìm thấy tài liệu proxy cho Angular-CLI tại đây:

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

Sau khi thiết lập một tệp có tên proxy.conf.json trong thư mục gốc, hãy chỉnh sửa package.json của bạn để bao gồm cấu hình proxy khi bắt đầu. Sau khi thêm "start": "ng serve --proxy-config proxy.conf.json" vào các tập lệnh của bạn, hãy chạy npm start chứ không phải ng serve, vì điều đó sẽ bỏ qua thiết lập cờ trong package.json của bạn.

phiên bản hiện tại của angle-cli: 1.1.0

Điều quan trọng cần lưu ý là đường dẫn proxy sẽ được thêm vào bất kỳ thứ gì bạn đã định cấu hình làm mục tiêu của mình. Vì vậy, một cấu hình như thế này:

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

và một yêu cầu như thế http://localhost:4200/apisẽ dẫn đến một cuộc gọi đến http://myhost.com/api/api. Tôi nghĩ mục đích ở đây là không có hai con đường khác nhau giữa phát triển và môi trường sản xuất. Tất cả những gì bạn cần làm là sử dụng/api làm URL cơ sở của mình.

Vì vậy, cách chính xác sẽ là chỉ sử dụng phần đứng trước đường dẫn api, trong trường hợp này chỉ là địa chỉ máy chủ:

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

Bước 1: Vào thư mục gốc của bạn Tạo proxy.conf.json

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

Bước 2: Vào package.json tìm "script" trong đó tìm "start"

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

Bước 3: bây giờ hãy thêm / auth / vào http của bạn

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

Bước 4: Bước cuối cùng trong Terminal chạy npm start

Trong trường hợp nếu ai đó đang tìm kiếm nhiều mục ngữ cảnh cho cùng một mục tiêu hoặc cấu hình dựa trên 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 phục vụ --proxy-config =. / proxy.conf.ts -o

Đây là một ví dụ làm việc khác (@ angle / 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"
  }
}

chạy với:

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

Ảnh chụp màn hình vấn đề nguồn gốc cors

Vấn đề cors đã được đối mặt trong ứng dụng của tôi. tham khảo ảnh chụp màn hình ở trên. Sau khi thêm vấn đề cấu hình proxy đã được giải quyết. url ứng dụng của tôi: localhost: 4200 và url api yêu cầu: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

Api side no-cors quyền được phép. Và tôi cũng không thể thay đổi vấn đề cors ở phía máy chủ và tôi chỉ phải thay đổi ở góc (phía máy khách).

Các bước giải quyết:

1. tạo tệp proxy.conf.json bên trong thư mục src.

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

2. Trong yêu cầu Api

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

Lưu ý: Chúng tôi đã bỏ qua url tên tên máy chủ trong yêu cầu Api, nó sẽ tự động thêm khi đưa ra yêu cầu. bất cứ khi nào thay đổi proxy.conf.js, chúng tôi phải khởi động lại ng-serve, sau đó chỉ những thay đổi mới được cập nhật.

3. Định cấu hình proxy trong angle.json

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

Sau khi kết thúc các bước này, khởi động lại ng-serve Proxy hoạt động bình thường như mong đợi, tham khảo tại đây

> 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. thêm vào proxy.conf.json

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

   2. trong package.json, thực hiện "start": "ng serve --proxy-config proxy.conf.json"

   3. trong mã let url = "/ api / clnsIt / dev / 78"; url này sẽ được dịch thành http: // targetIP: 9080 / api / clnsIt / dev / 78