带有 Angular 的 TypeScript：CORS 协议答案

【问题标题】：TypeScript with Angular: CORS protocol带有 Angular 的 TypeScript：CORS 协议
【发布时间】：2017-04-24 21:48:35
【问题描述】：

我正在将此请求发送到我的 REST 端点：

this.http.request(path, requestOptions);

path 是：http://localhost:8082/commty/cmng/users 和requestOptions：

{
    headers: { user: "sdf", password: "sdf" }
}

问题是浏览器在发送我的请求之前尝试获得 CORS 权限。

这是 CORS HTTP BROWSER curl 请求：

 curl "http://localhost:8082/commty/cmng/users" -X OPTIONS
   -H "Host: localhost:8082"
   -H "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"
   -H "Access-Control-Request-Method: PUT"
   -H "Access-Control-Request-Headers: passwd,user"
   -H "Origin: http://localhost:3000"
   -H "Connection: keep-alive"

发送此CORS请求后，收到200-OK响应状态，但流程中断，因此我的请求未发送。

响应的内容是：

Object { _body: error, status: 0, ok: false, statusText: "", headers: Object, type: 3, url: null }

这是我的CORSFilter.java：

@Provider
public class CORSFilter implements ContainerResponseFilter
{

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException
    {   
        responseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
        responseContext.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
        responseContext.getHeaders().add("Access-Control-Allow-Credentials", "true");
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
        responseContext.getHeaders().add("Access-Control-Max-Age", "1209600");
    }

}

但是我从我的服务器收到此响应：

Object {
  _body: error,
  status: 0,
  ok: false,
  statusText: "",
  headers: Object,
  type: 3,
  url: null
}

错误信息

Object {
  _body: error,
  status: 0,
  ok: false,
  statusText: "",
  headers: Object,
  type: 3,
  url: null
}

有什么想法吗？

【问题讨论】：

标签： angular typescript cors

【解决方案1】：

您可以使用@CrossOrgin 注解代替此过滤器，在此过滤器中，由于配置失败，有时会抛出一些异常，但如果您使用@CrossOrgin，则可以解决此问题

【讨论】：