0

I am having one application A, from where I have created jQuery Ajax request to open Application B in Popup of App A. App B build in Angular 7, the request goes to App B but facing below issue

Access to XMLHttpRequest at 'http://localhost:4200/Primary' from origin 'http://localhost:9090' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

I have configure proxyconfig in Angular 7 app, added proxy.conf.json but I think it is not correct approach as it is used for Angular 7 UI to node services.

jQuery.ajax({
  url: "http://localhost:4200/Primary", //pp.vars.web + "/" + "modelbinitializerequest",
  type: "GET",
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Access-Control-Allow-Headers', 'authorization,content-type,access-control-allow-origin,X-Requested-With,content-type');
    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    xhr.setRequestHeader('Access-Control-Allow-Credentials', true);
  },
  success: function(data) {
    console.log(data);
    var overlay = document.createElement("div"),
      mask = document.createElement("div"),
      overlayStyle = "overlayStyleCSS close_buttonCSS";
    maskStyle = "position:absolute;width:100%;height:320%;top:0;left:0;z-index:4000;background-color:#030303;opacity:0.3;filter:alpha(opacity=30);display:inline-block; *display:inline; *zoom:1;";
    overlay.setAttribute("class", overlayStyle);
    overlay.style.cssText = overlayStyle;
    overlay.id = "pluginLoadingOverlay";
    mask.setAttribute("style", maskStyle);
    mask.style.cssText = maskStyle;
    mask.id = "pluginLoadingOverlayMask";
    overlay.innerHTML = data;
    document.body.appendChild(mask);
    document.body.appendChild(overlay);
  }
});

I think if CORS issue goes solved then I can able to open App B angular 7 app in pop up.

Angular 7 App B i.e. 'http://localhost:4200/Primary' hosted on NPM and http://localhost:9090 on jetty server.

I did try Angular 7 App B deployed on Tomcat server with the configure the headers in web.xml in conf folder as below, but still issue not solved.

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,PUT,DELETE,HEAD,OPTIONS</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,Accept,Authorization,Origin,Access-Control-Request-Method,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>
zero298
  • 25,467
  • 10
  • 75
  • 100
roshan
  • 83
  • 11
  • can you anybody tell me the solution for to remove CORS issue. – roshan May 15 '19 at 11:29
  • Possible duplicate of [CORS jQuery AJAX request](https://stackoverflow.com/questions/20442628/cors-jquery-ajax-request) – zero298 May 15 '19 at 11:32
  • i went through above comment, but its seems like some different answer. – roshan May 15 '19 at 13:14
  • `Access-Control-Allow-Origin` along with the other `Access-Control-Allow-*` headers are **response** headers. Setting them in the `jQuery.ajax` call does nothing. The server doesn't care if you tell it it's OK for it to send data across domains, because it isn't going to listen to you. It's supposed to tell you that it's willing to send data across domains. – zero298 May 15 '19 at 13:18
  • Your web.xml setting looks correct. 1 thing you can possibly try is remove the wildcard for origins and keep the param-value as blank. I was facing a similar issue and removing the wildcard entry helped. – justojas May 15 '19 at 13:26
  • @OjasDeshpande thanks for your suggestion. tried, it is not working. – roshan May 16 '19 at 06:41

0 Answers0