web-services - 为什么我的本地网站无法访问我本地的 REST 服务？

Question

我有一个通过 Tomcat 在端口 8080 上本地运行的 Spring MVC REST 服务。当我通过浏览器或 fiddler 直接访问该服务时，它按预期工作。我还有一个用 AngularJS 构建的本地网站。如果我将这个网站放在 Tomcat 目录中并导航到 Tomcat 提供的网站链接，一切仍然正常。

问题是我没有将网站放在 Tomcat 目录中。假设我将网站项目放在我的桌面上并导航到一个应该从本地 REST 服务检索数据的页面......我可以在 fiddler 中看到请求正在通过，点击服务，服务返回数据...但是网站不显示它!

为什么只有当两者都由 Tomcat 提供服务时才能正常工作？

直接点击服务链接: http://localhost:8080/CPProject/users(返回所有用户，JSON 格式)

网站(有效): http://localhost:8080/CPWebsite/app/#/users

网站(不工作): http://localhost:63342/CPWebsite/app/index.html#/users(63342是Webstorm 7.0使用的端口)或者 file:///C:/Users/someuser/CPWebsite/app/index.html#/users

我的 Angular Controller 看起来像这样:

cpControllers.controller('UserListCtrl',
    function($scope, $http) {
        $http.get('http://localhost:8080/CP/users')
            .success(function(data) {
                $scope.users = data;
            }
        )
    }
);

我还在我的 Sprint MVC 服务中创建了一个 CORS 过滤器:

@Component
public class SimpleCORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS, HEAD");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}

}

Answer 1

您需要添加正确配置的 CORS filter到允许预检请求的应用程序。这是一个示例配置:

<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>false</param-value>
    </init-param>

    <init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET, HEAD, POST, PUT, DELETE, OPTIONS</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>3600</param-value>
    </init-param>

    <init-param>
        <param-name>cors.tagRequests</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/api/*</url-pattern>
</filter-mapping>