CORS-从角度调用Tomcat上的rest服务 [英] CORS - Calling rest services on Tomcat from angular

问题描述

我正试图从Angular 4调用部署在Tomcat 8上的REST服务。由于这两个服务都在单独的域上运行，因此会出现CORS问题。因此，在tomcat / conf / web.xml中，我添加了以下过滤器

 < filter> 
< filter-name> CorsFilter< / filter-name> 
< filter-class> org.apache.catalina.filters.CorsFilter< / filter-class> 
< init-param> 
< param-name> cors.allowed.origins< / param-name> 
< param-value> *< / param-value> 
< / init-param> 
< init-param> 
< param-name> cors.allowed.methods< / param-name> 
< param-value> GET，POST，HEAD，OPTIONS，PUT< / param-value> 
< / init-param> 
< init-param> 
< param-name> cors.allowed.headers< / param-name> 
<参数值>内容类型，X请求的对象，接受，来源，访问控制请求方法，授权，访问控制请求报头< /参数值> 
< / init-param> 
< init-param> 
< param-name> cors.exposed.headers< / param-name> 
< param-value>访问控制允许凭据，访问控制允许凭据< / param-value> 
< / init-param> 
< / filter> 
< filter-mapping> 
< filter-name> CorsFilter< / filter-name> 
< url-pattern> / *< / url-pattern> 
< / filter-mapping> 
  

这就是我从Angular发送GET请求的方式

  var basicOptions：RequestOptionsArgs = {
 url：'http：// server3：7000 / myrest / info'，
方法：RequestMethod.Get， 
搜索：null，
标头：new Headers（
 {'Authorization'：'Basic AG1hZG1pbjpkZW1vLmRlbW8 ='}，
），
正文：null 
 }; 
 
 basicOptions.headers.append（'Content-Type'，'application / json'）; 
 
 var reqOptions = new RequestOptions（basicOptions）; 
 var req = new Request（reqOptions）; 
返回this.http.request（req）; 
  

由于我发送的是Authorization标头，因此它也添加在'cors.allowed.headers中

当我从Chrome调用REST服务时，它总是给我一个无效的CORS请求错误（网络标签->预览）。以下是浏览器控制台中的错误

XMLHttpRequest无法加载

I am trying to call REST services deployed on Tomcat 8 from Angular 4. Since both these are running on separate domains, CORS issue is expected. So, in the tomcat/conf/web.xml, I have added the below filter

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Authorization,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping> 

This is how I am sending the GET request from Angular

var basicOptions:RequestOptionsArgs = {
  url: 'http://server3:7000/myrest/info',
  method: RequestMethod.Get,
  search: null,
  headers: new Headers(
    {'Authorization': 'Basic AG1hZG1pbjpkZW1vLmRlbW8=' },
    ),
  body: null
};

basicOptions.headers.append('Content-Type', 'application/json');

var reqOptions = new RequestOptions(basicOptions);
var req = new Request(reqOptions);
return this.http.request( req );

Since, I am sending the Authorization header, it is also added in the 'cors.allowed.headers' param in Tomcat.

When I call the REST service from Chrome, it always gives me a 'Invalid CORS request' error (Network tab -> Preview). Below is the error in browser console

XMLHttpRequest cannot load http://server3:7000/myrest/info. 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 403.

Is there something else that I need to do to make it work?

解决方案

Günter Zöchbauer is right. It is not related to Angular. Even with the filter you added, the server is not configure to accept requests from other domains. To configure your server you can check this answer

Notice that you have a preflight request because you send custom http headers (see the picture below).

这篇关于CORS-从角度调用Tomcat上的rest服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！