javascript - 无法以 Angular 正确设置某些 HTTP header 键值对

Question

我在向 http.post 添加一些 HTTP header 键值时遇到了问题。它应该非常简单，但我没有正确设置。我们在服务器端使用 spring-boot，在客户端使用 Angular 框架。我们的后端请求以下 header 值:

'Content-Type' = 'application/json' 
'X-Requested-With' = 'XMLHttpRequest' 
'Cache-Control' = 'no-cache'

在 angular 中，我创建了一个 header ，这个 header 我添加了一个 RequestOptions 并将这个选项添加到发布请求中。见下面的代码:

.....
    let myHead = new Headers();
    myHead.append('Content-Type', 'application/json');
    myHead.append('X-Requested-With', 'XMLHttpRequest');
    myHead.append('Cache-Control', 'no-cache');
    const options = new RequestOptions({ headers: myHead });

    return this.http.post(ServerUrl,data, options).map((response: Response) => {..//do Something...}

...

问题是，如果我正在检查发布请求，我会发现 header 设置不正确。

正如您在上面看到的那样，它没有像我期望的那样正确设置为键值!？

如果我使用工具来执行此操作，例如 postman 插件，你会看到它应该如何正确地完成:

POST /ias-vwa/api/auth/login HTTP/1.1
Host: de00-fm26-l1:9090
Content-Type: application/x-www-form-urlencoded
X-Requested-With: XMLHttpRequest
Cache-Control: no-cache
Postman-Token: c9bc0404-bc1e-57eb-fca4-07bba9ee6d93

我尝试了很多不同的选项来设置标题，但我总是以它总是像这样设置在一行中结束:

Access-Control-Request-Headers:access-control-allow-origin,cache-control,content-type,x-requested-with

我在浏览器上得到的错误:

XMLHttpRequest cannot load http://t00:9090/ias-vwa/api/auth/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401.

任何人都可以给我一些提示吗？

Answer 1

您正在尝试 POST 到与您的域(您的应用程序实时)不同的域，并且您正在运行 CORS 问题。您需要在响应中添加 Access-Control-Allow-Origin 作为 header 。

Access-Control-Allow-Origin: *