Make writing a habit together! This is the fifth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

As front-end development, we docking with the back-end interface is very frequent things, but we always encounter cross-domain problems in the process of docking, so how do we solve?

This article uses angualr to cover the topic of proxy API docking.

So let’s first understand what cross-domain is.

Cross domain

Simple understanding: when a request protocol, domain name (IP address), port of any of the three parts of the current page URL is different is cross-domain.

Take my site https://jimmyarea.com for example:

The requested address Whether the cross-domain why
jimmyarea.com is Agreement is different
jimmyarea.cn is Address different
https://127.0.0.1:9000 is The address and port number are different

The agent

At this point, we can locally tune the API addresses of different environments by proxy.

First, we create a new file proxy.conf.json in the root directory of the project.

We request to interface for example: https://jimmyarea.com/api/public/article?page=-1

{
  "/api": {
    "target": "https://jimmyarea.com/"."changeOrigin": true."secure": false."pathRewrite": {
      "^/api": "/api"}}}Copy the code

Target is the address of the proxy, and pathRewrite is a rewrite of the proxy prefix.

Once the proxy file is complete, you need to start the proxy. We add an additional command line to package.json to indicate that it is used for debugging in the development environment.

"script": {
  "dev": "ng serve --proxy-config=proxy.conf.json",}Copy the code

Run NPM run dev to start the project and bring the agent. Each time the agent file changes, you need to restart the command line ~

validation

Let’s create a new article service, where the article. Service. Ts file is as follows:

import { Injectable } from '@angular/core';
// HTTP client
import { HttpClient } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})

export class ArticleService {

  constructor(
    private http: HttpClient
  ){}// Get the list of articles
  getArticleList() {
    return this.http.get('/api/public/article', {
      // Return type
      responseType: 'json'.// Request parameters
      params: {
        page: -1}}}})Copy the code

The above request, on the page address is http://localhost:4200/api/public/article? Page = 1, actually access the address https://jimmyarea.com/api/public/article?page=-1. We can call the validation at user-list.component.ts:

ngOnInit():void {
  this.articleService.getArticleList().subscribe({
    next: (data: any) = > {
      console.log(data)
    },
    error: () = >{}})// ...
}
Copy the code

Once the program is running, you can see the following network request on the console:

Good Job, Bro. We can debug the address given by the perfect proxy back end, and the proxy can be more than a proxy address oh. Readers can write multiple proxy addresses to verify that ~

【 the 】 ✅