从Spring Rest到AngularJS客户端的自定义标头

基础概念

自定义标头（Custom Headers）：在HTTP请求和响应中，除了标准的HTTP头之外，可以添加自定义的标头来传递额外的信息。这些标头可以用于各种目的，如身份验证、跟踪、版本控制等。

类型

请求标头（Request Headers）：客户端发送给服务器的信息。
响应标头（Response Headers）：服务器返回给客户端的信息。

应用场景

身份验证：使用自定义标头传递令牌或其他认证信息。
版本控制：通过标头指定API版本。
日志跟踪：用于记录请求来源和详细信息。

实现示例

后端（Spring Rest）

在Spring Boot应用中，可以通过拦截器或直接在控制器方法中添加自定义标头。

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

@RestController
public class MyController {

    @GetMapping("/data")
    public String getData(@RequestHeader("X-Custom-Header") String customHeader) {
        // 处理逻辑
        return "Data with custom header: " + customHeader;
    }
}

前端（AngularJS）

在AngularJS客户端，可以通过$http服务设置自定义标头。

angular.module('myApp', [])
  .controller('myController', ['$scope', '$http', function($scope, $http) {
    $http({
      method: 'GET',
      url: '/data',
      headers: {
        'X-Custom-Header': 'my-custom-header-value'
      }
    }).then(function(response) {
      $scope.data = response.data;
    }, function(error) {
      console.error('Error:', error);
    });
  }]);

常见问题及解决方法

问题1：自定义标头未正确传递

原因：可能是由于浏览器的同源策略限制（CORS）或服务器端未正确配置允许自定义标头。

解决方法：

服务器端：在Spring Boot中配置CORS允许自定义标头。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .exposedHeaders("X-Custom-Header");
    }
}