angularjs - AngularJS 自定义响应头的 Access-Control-Expose-Headers 配置

标签 angularjs spring cors

我在资源上实现自定义响应头,在 reading over a similar question 之后,我在 CORS header 中添加了“Access-Control-Expose-Headers”,但我不能正确配置某些内容。

以下是我在资源的 GET 请求中收到的 header :我收到“Steve”的“Response-Header”,“Access-Control-Expose-Headers”应该允许

Access-Control-Allow-Headers:x-requested-with, Request-Header, Response-Header
Access-Control-Allow-Methods:POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:Response-Header
Response-Header:Steve

但是,Angular 仍然无法访问该自定义 header 。我找回了我的自定义请求头,但不是我的自定义响应头:
{
  "data": {
    "id": 2,
    "content": "Hello, frank!"
  },
  "status": 200,
  "config": {
    "method": "GET",
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "url": "http:\/\/localhost:8080\/greeting",
    "headers": {
      "Accept": "application\/json, text\/plain, *\/*",
      "Request-Header": "frank"
    }
  },
  "statusText": "OK"
}

Angular 1.3 $httpProvider.interceptor:
'use strict';
angular
  .module('headerDemoUiApp')
  .factory('AuthInterceptor', function AuthInterceptor(nameService) {

    return {
      request: handleRequest,
      response: handleResponse
    };

    function handleRequest(config) {
      if (angular.isDefined(config.headers)) {
        config.headers['Request-Header'] = "frank";
      }
      return config;
    }

    function handleResponse(response) {
      console.log('Response: ' + JSON.stringify(response));

      if (angular.isDefined(response.config.headers['Response-Header'])) {
        var respHead = response.config.headers['Response-Header'];
        console.log('Response-Header: ' + respHead);
        nameService.responsename=respHead;
      }
      return response;
    }

  });

并且,Spring 版本 4.1.6 @RestController 添加了 header 。
@RestController
public class GreetingController {

    private static final String template = "Hello, %s!";
    private final AtomicLong counter = new AtomicLong();

    @RequestMapping("/greeting")
    public Greeting greeting(
            @RequestParam(value = "name", defaultValue = "World") String name,
            HttpServletResponse response,
            @RequestHeader("Request-Header") String headerName) {

        // Sets our custom response header
        response.setHeader("Response-Header","Steve");

        return new Greeting(counter.incrementAndGet(),
                String.format(template, headerName));
    }
}

API Code Repo

UI Code Repo

谢谢参观!

最佳答案

问题在于您的 API GreetingController.java
更改问候方法以返回 ResponseEntity 并使用 HttpHeaders,如下所示

@RequestMapping("/greeting")
    public ResponseEntity<Greeting> greeting(@RequestParam(value = "name", defaultValue = "World") String name, @RequestHeader("Request-Header") String headerName) {

        MultiValueMap<String, String> headers = new HttpHeaders();
        // Sets our custom response header
        headers.add("Response-Header","Steve");
        return new ResponseEntity<Greeting>(new Greeting(counter.incrementAndGet(),String.format(template, headerName)), headers, HttpStatus.OK); 
    }

以下是我对 Postman 客户端的 header 响应
Content-Length → 2
Content-Type → text/plain;charset=UTF-8
Date → Wed, 27 May 2015 15:53:47 GMT
Response-Header → Steve
Server → Apache-Coyote/1.1

关于angularjs - AngularJS 自定义响应头的 Access-Control-Expose-Headers 配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29934703/

相关文章:

java - Spring-boot-test 依赖项必须手动导入,尽管它们存在于 Spring-boot-starter-parent 中 - 为什么?

spring - 我可以为数据库实例使用多个 C3P0 数据源吗?

javascript - Access-Control-Allow-Origin - 尝试从 Wordpress 安装访问 JSON 时出错

javascript - Angular Ui 路由器 - 以编程方式设置父级

javascript - karma 测试 rootScope.$on $locationChangeSuccess

javascript - 未调用隔离范围函数(多个日期选择器)

java - spring boot拦截器,拦截返回中文乱码的问题

javascript - Meteor 与 Zurb Foundation For Apps

java - spring mvc 中包含多部分数据的 POST 请求

node.js - 我如何从 mocha/superagent 测试对 amazon-s3 的 CORS 上传调用?