The agent in this section is the agent service provided by NG Serve.

In the development environment, Chrome detects requests across domains when an Angular application is tested with a back-end service. Proxy services are used to solve cross-domain problems in development mode.

Next we by proxy service request agent to the back-end service http://localhost:8080/api http://localhost:4200/api

Basic agent

First we need to create a proxy configuration file named proxy.conf.json in the project directory as follows:

{
  "/api": {
    "target": "http://localhost:8080"."secure": false}}Copy the code

We load the proxy configuration file with the –proxy-config parameter:

ng serve --proxy-config=proxy.conf.json
Copy the code

We can also set the proxy in angular.json via the proxyConfig property:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "proxy.conf.json"
    },
Copy the code

Angular. json is the Angular CLI configuration file

The path to rewrite

In the basic agent, we configured the http://localhost:4200/api proxy back-end service http://localhost:8080/api. In real development, our back-end service might not provide the/API prefix, and the actual back-end service might look like this:

http://localhost:8080/users
http://localhost:8080/orders
Copy the code

In this case, the basic configuration above agent couldn’t meet our requirements, so the back-end service http://localhost:8080/api/users. Fortunately, the Angular CLI proxy provides path rewriting.

{
  "/api": {
    "target": "http://localhost:8080"."secure": false."pathRewrite": {
      "^/api": ""}}}Copy the code

At this time we visit http://localhost:4200/api/users in the browser, the proxy service will give us the agent to the back-end service at http://localhost:8080/users.

Path rewriting allows us to distinguish between front-end routing and back-end services. Can be clear at a glance know http://localhost:4200/api/users is a back-end services.

This region,

With the development of interconnection technology, the division of labor between front and back ends is becoming more and more clear. The interaction between the front and back ends is the REST interface. In the real environment, our local front-end engineer won’t run the back-end services, but use the back-end engineer to provide service, at this point, our back-end service domain wouldn’t be localhost, and may be http://test.domain.com/users.

At this point we need to use another parameter of the proxy, changeOrigin, to satisfy our requirements:

{
  "/api": {
    "target": "http://test.domain.com"."secure": false."pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true}}Copy the code

In this way, we visit http://localhost:4200/api/users will be acting to http://test.domain.com/users.

The agent log

While using the front-end agent, you can also add the logLevel option if you want to debug whether the agent is working properly:

{
  "/api": {
    "target": "http://test.domain.com"."secure": false."pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"}}Copy the code

LogLevel The logLevel options are DEBUG, INFO, WARN, and silent. The default logLevel is INFO.

Multi-agent entry

If the front-end needs to configure multiple entry proxies to the same back-end service and does not want to use the previous path rewriting, we can create a proxy.conf.js file to replace our previous proxy.conf.json:

const PROXY_CONFIG = [
    {
        context: [
            "/my"."/many"."/endpoints"."/i"."/need"."/to"."/proxy"].target: "http://localhost:3000".secure: false}]module.exports = PROXY_CONFIG;
Copy the code

Modify our angular.json proxyConfig to proxy.conf.js:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "proxy.conf.js"
    },
Copy the code