时间戳

首页 > 解决方案 > 角度未在请求标头上发送正确的标头

angular - 角度未在请求标头上发送正确的标头

问题描述

我是使用 Angular 的新手，我正在尝试学习一点，但我无法使用令牌进行简单的 Get。我研究了很多，总是以这段代码结束。

对于我的后端，我使用 Kotlin / Springboot 并配置了 Cors。

即便如此，当尝试执行此请求时，我也会收到此错误。

export class AccountService {

  endpoint = 'http://localhost:5000/api-v1/account/list'

  constructor(private http: HttpClient) { }

  list() {
    const token = sessionStorage.getItem('token') // I'm getting the token correctly

    const headers = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Headers': '*',
      'Authorization': token,
    }

    return this.http.get<any[]>(this.endpoint, { headers: headers })   } }

从源访问“ http://localhost:5000/api-v1/account/list ”中的 XMLHttpRequest >“ http://localhost:4200 ”已被 CORS 策略阻止：对预检请求的响应未通过 > 访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

--

core.js:15713 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: > " http://localhost:5000/api-v1/account/list ", ok: false, ...}标头：HttpHeaders {normalizedNames：Map(0)，lazyUpdate：null，标头：Map(0)} 状态：0 statusText：“未知错误”url：“ http://localhost:5000/api-v1/account/list ”好的：错误名称：“HttpErrorResponse”消息：“ http://localhost:5000/api-v1/account/list 的Http 失败响应：0 未知错误”错误：ProgressEvent {isTrusted：true，lengthComputable：false，加载：0 , 总数: 0, 类型: "error", > ...} proto : HttpResponseBase

我在服务器端的 Cors 配置

class CorsFilter : Filter {
    override fun init(p0: FilterConfig?) { TODO("not implemented") }

    override fun destroy() { TODO("not implemented") }

    override fun doFilter(servletRequest: ServletRequest, servletResponse: ServletResponse, filterChain: FilterChain) {
        val response = servletResponse as HttpServletResponse
        val request = servletRequest as HttpServletRequest

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200")
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS")
        response.setHeader("Access-Control-Allow-Headers", "Content-Type")
        response.setHeader("Access-Control-Allow-Credentials", true.toString())

        if ("OPTIONS".equals(request.method, ignoreCase = true)) {
            response.status = HttpServletResponse.SC_OK
        } else {
            filterChain.doFilter(servletRequest, servletResponse)
        }
    }
}

我真的不知道在 Angular 中我们是否应该添加其他任何东西。

标签： angular

解决方案

在您的服务器端代码上，您可以更改此行吗

   response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200")

至

    response.setHeader("Access-Control-Allow-Origin", "*")

那应该工作。

推荐阅读