ajax - 使用来自另一个应用程序的 Ajax 调用调用 Angular7 应用程序时出现 CORS 问题

Question

我有一个应用程序 A，从那里我创建了 jQuery Ajax 请求以在应用程序 A 的弹出窗口中打开应用程序 B。应用程序 B 在 Angular 7 中构建，请求转到应用程序 B，但面临以下问题

从源“ http://localhost:9090 ”访问“ http://localhost:4200/Primary ”处的 XMLHttpRequest已被 CORS 策略阻止：Access-Control 不允许请求标头字段 access-control-allow-origin - 预检响应中的允许标头。

我在 Angular 7 应用程序中配置了 proxyconfig，添加了 proxy.conf.json 但我认为这不是正确的方法，因为它用于 Angular 7 UI 到节点服务。

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);
  }
});

我认为如果 CORS 问题得到解决，那么我可以在弹出窗口中打开 App B angular 7 应用程序。

Angular 7 App B 即“ http://localhost:4200/Primary ”托管在 NPM 上，http://localhost:9090托管在码头服务器上。

我确实尝试在 Tomcat 服务器上部署 Angular 7 App B，并在 conf 文件夹中配置 web.xml 中的标头，如下所示，但问题仍未解决。

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>

标签： ajaxangulartomcatangular7