Angular解决http请求跨域问题

最新推荐文章于 2025-05-13 10:00:42 发布

原创最新推荐文章于 2025-05-13 10:00:42 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

NodeJS 同时被 2 个专栏收录

25 篇文章

订阅专栏

Angular

4 篇文章

订阅专栏

本文介绍如何通过配置proxy.conf.json实现API请求代理，并演示如何利用Angular的HttpClient进行跨域网络请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建代理配置文件 proxy.conf.json

假设要把所有到 http://localhost:4200/api 的调用都转发给运行在 http://localhost:8888/api 上的服务器，或者把到 http://localhost:4200/appapi 的调用转发给运行在 http://xxx.xxxx.net/ 上的服务器

则在 proxy.conf.json 中添加以下内容：

{
    "/api": {
        "target": "http://localhost:8888",
        "secure": false
    },
    "/appapi": {
        "target": "http://xxx.xxxx.net",
        "secure": false,
        "pathRewrite": {
            "^/appapi": ""
        },
        "changeOrigin": true,
        "logLevel": "debug"
    }
}

pathRewrite 能让你在运行时重写 URL 路径。比如，你可以在代理配置中指定 pathRewrite 值为 "^/appapi": ""，以移除路径末尾的 "appapi" 部分。

changeOrigin 如果你要访问的后端不在 localhost 上，需要设置 changeOrigin 为 true。

logLevel 代理的有效日志级别是 info（默认值）、debug、warn、error 和 silent。

修改package.json

修改启动命令，默认使用npm start时使用代理文件配置的代理

也可以直接使用下面命令启动

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

发起网络请求

修改app.module.ts，引入HttpClientModule

使用HttpClient请求接口，请求的url不需要带域名，默认请求的是http://localhost:4200的服务，如果请求的域名已经在proxy.conf.json配置好了，则会转发到对应的域名。

创建一个 login.service.ts 来处理网络请求：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from "@angular/core";

@Injectable()
export class LoginService {
    private headers: HttpHeaders;
    constructor(private http: HttpClient) {
        this.headers = new HttpHeaders();
        this.headers.set('Content-Type', 'application/json');
    }

    public query() {
        return this.http.get('/api/query?adid=1&accesstoken=2', {
            headers: this.headers
        })
        .toPromise()
        .then((data: any) => {
          console.log("success:", data);
          return data;
        })
        .catch((err) => {
           console.log("error:", err);
        });
    }
}

在 app.module.ts 中将LoginService添加到providers中

在login.component.ts中引入LoginService

import { LoginService } from './login.service';

export class LoginComponent implements OnInit {

  constructor(private loginService: LoginService) { }

  ngOnInit(): void {
  }
  
  onClick() {
    this.loginService.query().then((data) => {
      console.log(data);
    });
  }

}