Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use Api agent in Angular". In daily operation, I believe many people have doubts about how to use Api agent in Angular. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use Api agent in Angular". Next, please follow the editor to study!

Cross-domain

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

Take my site https://jimmyarea.com as an example:

Whether the requested address is cross-domain reason jimmyarea.com is a protocol different jimmyarea.cn is a different address https://127.0.0.1:9000 is a different address and port number is different

Agent

At this time, we can locally tune the api addresses of different environments through the agent.

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

Let's take the API request https://jimmyarea.com/api/public/article?page=-1 as an example:

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

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

After completing the agent file, you need to open the agent. We added one more command line to package.json, indicating that it was used by the development environment for debugging.

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

Execute the npm run dev startup project and bring the agent. Every time the agent file changes, you need to restart the command line ~

Verification

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 article list getArticleList () {return this.http.get (' / api/public/article', {/ / return type responseType: 'json' / / request parameter params: {page:-1}})}}

In the above request, the address on the page is http://localhost:4200/api/public/article?page=-1, but it actually accesses the address https://jimmyarea.com/api/public/article?page=-1. We can call in user-list.component.ts to verify:

NgOnInit (): void {this.articleService.getArticleList (). Subscribe ({next: (data: any) = > {console.log (data)}, error: () = > {}}) / /.}

After the program runs, you can see the following network request on the console:

Good Job, Bro. We can perfect the address given by the back end of the agent, debug it, and the agent can have more than one address.

At this point, the study on "how to use Api agent in Angular" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.