Question

我正在使用Angular 4，JAX-RS进行休息服务。 Angular部署在tomcat服务器中，JAX-RS休息服务部署在Websphere 8.5 App服务器中。我正在尝试使用Basic Auth保护其余服务。这是用于解决CORS问题的web.xml部分和Basic Auth

<filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowGenericHttpRequests</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowSubdomains</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, PUT, DELETE, OPTIONS, HEAD </param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>cors.maxAge</param-name>
            <param-value>-1</param-value>
        </init-param>
    </filter>
    <filter-mapping>
            <filter-name>CORS</filter-name>
            <url-pattern>/*</url-pattern>
    </filter-mapping> 

<security-role>
        <description>default</description>
        <role-name>default</role-name>
    </security-role>

     <security-constraint>
        <display-name>DefaultConstraints</display-name>
        <web-resource-collection>
            <web-resource-name>all resources</web-resource-name>
            <url-pattern>/*</url-pattern>
            <http-method>GET</http-method>
            <http-method>POST</http-method>
            <http-method>PUT</http-method>
            <http-method>HEAD</http-method>
            <http-method>TRACE</http-method>
            <http-method>DELETE</http-method>
            <http-method>OPTIONS</http-method>
        </web-resource-collection>
        <auth-constraint>
            <role-name>default</role-name>
        </auth-constraint>
    </security-constraint>  

     <login-config>
        <auth-method>BASIC</auth-method>
    </login-config>

当Angular应用程序使用上述配置从Chrome浏览器调用Chrome浏览器中的Rest服务时，它会抛出错误，并在浏览器控制台中显示以下内容。

无法加载资源：服务器响应状态为401（未授权）

无法加载http://localhost:9091/xxxxxxx/rest/v1/technologies：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8080＆＃39;因此不允许访问。响应的HTTP状态代码为401。

如果相同的角度应用程序从IE调用其余服务，则浏览器会弹出一个凭据弹出窗口，并且在成功登录后，angular能够获取并显示记录。

它适用于IE，不适用于chrome。

如果我删除安全约束，基本身份验证，角色并且只放置CORS过滤器，Angular就能够从chrome和IE中的其他服务中获取记录。如果在安全约束时仅在chrome中失败。

请帮我解决。如果有任何错误，请告诉我。

谢谢，哈瑞。

Answer 1

这是因为您的服务器（API）部署在localhost：9091上，而您的前端应用程序（Angular APP）在localhost：8080上运行。

要进行api调用，或者更好地说http调用，Angular中有Http / HttpClient模块，然后在本机浏览器级别实现，问题在于，浏览器检测到来自应用程序的请求（：8080）正在调用另一个资源（：9091）可能是一个CORS请求。

Wikipedia的定义

跨域资源共享。跨源资源共享（CORS）是一种机制，允许从提供第一个资源的域之外的另一个域请求网页上的受限资源（例如字体）。

为了确保上述机制正常工作，浏览器通过在每个请求之前进行额外调用来阻止呼叫。这些请求是OPTIONS类型请求，如果服务器响应＆＃34;是..允许CORS。＆＃34;然后浏览器会让你的呼叫继续进行，否则会引发错误（正是你得到的）。

解决方案，

在部署角度应用时使用代理。

ng serve --aot --port 3300 --proxy-config proxy-conf.json

在这里，我在端口：3300上部署我的角度应用程序，然后说，使用存储在proxy-conf.json文件中的代理配置。

其中，proxy-conf.json文件有..

    [
        {
            "context": [
                "/api",
                "/auth"
            ],
            "target": "http://localhost:8001",
            "secure": false
        }
    ]

在上述配置的context数组中，我说过cli，仅对仅使用网址/api，/auth的请求应用代理。这是您需要根据API端点自定义的内容。

target键是指出API的位置。（我在端口上部署了我的API：8001）

希望它有所帮助。!!

Answer 2

尝试安装CORS扩展程序：

https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim?hl=en

在我的情况下工作得很好。

Answer 3

您的浏览器出现此错误。您收到错误是因为您的应用程序不在同一个域中。我建议使用代理。 CLI中有一个选项。这样它将是一次性配置。

另一种选择是在浏览器中安装CORS插件。然而，这需要每个开发人员在他们使用的每个浏览器上安装它。

Answer 4

在Chrome / Firefox中，没有为XMLHttprequest设置WAS LTPA2令牌cookie。添加withCredentials：true后，http get请求也在chrome / firefox中工作。 Chrome现在在添加选项后添加了Cookie。

checkMatchConditions

但同样不适用于帖子请求。 Chrome没有为帖子请求添加Cookie。

Angular 4 + Java EE + Basic Auth + JAX-RS + Chrome抛出CORS问题

4 个答案: