Angular 与 Java 跨域问题解析

在现代 web 开发中，前后端分离的架构越来越普遍，Angular 被广泛用作前端框架，而 Java 则是后端开发的重要语言之一。但是，在前端与后端之间进行数据交互时，跨域（CORS）问题往往会给开发者带来困扰。本文将为您详细介绍 Angular 与 Java 之间的跨域问题，分析解决方案，并提供相关代码示例。

跨域是什么？

跨域是指浏览器出于安全原因，限制了脚本在不同域之间的请求。所谓“域”，是由协议、主机名和端口号共同确定的。例如，在 和 中，由于协议不同，它们是不同的域。

什么是 CORS？

CORS（Cross-Origin Resource Sharing）是一种允许服务器指定哪些来源的资源可以访问其内容的机制。浏览器在发起跨域请求时，必须经过 CORS 的校验。

Angular 发送跨域请求

在 Angular 中，可以使用 HttpClient 模块发送跨域请求。首先，确保您已在应用中导入 HttpClientModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule  // 导入 HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

接下来，可以通过 HttpClient 发送 GET 或 POST 请求：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('http://localhost:8080/api/data')  // 假设 Java 服务端
      .subscribe(response => {
        console.log(response);
      });
  }
}

Java 后端设置 CORS

在 Java 后端，您需要设置 CORS 以允许来自 Angular 应用的跨域请求。使用 Spring Boot 框架时，可以通过 @CrossOrigin 注解轻松实现：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:4200")  // 允许 Angular 应用的跨域请求
public class DataController {
  
    @GetMapping("/api/data")
    public String getData() {
        return "Hello from Java backend!";
    }
}

完整代码示例

以下是 Angular 和 Java 整合的示例代码：

// Angular 代码 app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('http://localhost:8080/api/data')
      .subscribe(response => {
        console.log(response);
      });
  }
}

// Java 代码 DataController.java
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class DataController {
  
    @GetMapping("/api/data")
    public String getData() {
        return "Hello from Java backend!";
    }
}

关系图

为了更清晰地理解 Angular 和 Java 后端之间的互动关系，以下是其关系图示意：

erDiagram
    ANGULAR {
        string name
        string requestType
    }
    JAVA {
        string endpoint
        string responseType
    }
    ANGULAR ||--o{ JAVA : sends

在这个关系图中，Angular 形成了与 Java 后端的交互关系，通过特定的请求形式向 Java 发送 HTTP 请求，而 Java 决定了相应的端点和响应类型。

结论

CORS 是现代 web 应用中必不可少的一个概念，尤其是在前后端分离的架构下。通过简单的配置，您可以使 Angular 应用与 Java 后端无缝衔接。希望本文对您理解 Angular 与 Java 之间的跨域问题有所帮助。如有进一步的问题，欢迎您随时提出！