AngularJS、Spring 社交和 CORS

Question

我有一个使用 Spring 和 Spring 社交构建的应用程序。

我能够连接到社交网络，效果很好。然后我有了在前端使用 angular 而不是 jsp 的好主意，并着手用 http post 替换我用来连接社交网络的 html 表单使用 angular。

现在我收到错误

XMLHttpRequest cannot load https://accounts.google.com/o/oauth2/auth?client_id=233119510011-epdnrh651t…%2Fconnect%2Fgoogle&scope=email&state=e29561c9-a538-47dd-8b92-ca0aaa8b413b. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Form posts 工作，但 angularjs posts 不工作。是什么赋予了？我使用 fidler 查看了失败的 angular post，将其与工作的 html 表单 post 进行了比较，并找到了这个。

使用 html 表格工作 POST

 POST http://localhost:8080/connect/google HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 54
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.76 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:8080/myscene/account-settings
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: _ga=GA1.1.679586999.1424266167; JSESSIONID=74A29A5F0B04B937281A7FAC4DD7B102
X-Forwarded-For: 12.13.14.15

_csrf=c71a3881-d272-42de-b8b1-c7647f7e7609&scope=email

这是实现 post

的代码

<form action='<c:url value="/connect/google" />' method="POST">
                        <input name="${_csrf.parameterName}"
                            value="${_csrf.token}" /> <input name="scope"
                            value="email" />
                        <button type="submit" class="common_button">Connect with
                            Google</button>
                    </form>

POST 使用 angularjs

无效

POST http://localhost:8080/connect/google HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 54
Origin: http://localhost:8080
X-XSRF-TOKEN: c71a3881-d272-42de-b8b1-c7647f7e7609
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.76 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Cache-Control: max-age=0
Referer: http://localhost:8080/myscene/account-settings
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: _ga=GA1.1.679586999.1424266167; JSESSIONID=74A29A5F0B04B937281A7FAC4DD7B102
X-Forwarded-For: 12.13.14.15

_csrf=c71a3881-d272-42de-b8b1-c7647f7e7609&scope=email

这是实现 post

的代码

$http({
                  method  : 'POST',
                  url     : '/connect/google',
                  data    : $.param(oauth2Scope),  // pass in data as strings
                  headers : { 
                                'Content-Type': 'application/x-www-form-urlencoded',
                                'X-XSRF-TOKEN'   : token,
                                'Cache-Control'  : 'max-age=0',
                                'Accept'         : 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
                            }  
                 })

我走在正确的轨道上吗？我发现这很棘手，所以非常欢迎任何帮助！希望有人能给我指出正确的方向。

编辑 1：

我已经在服务器端创建了一个过滤器，但是没有用，所以我一定还需要做其他事情。

编辑 2：

此外，值得注意的是，生成错误的请求是 Spring 社交框架对 google 服务器的 GET 请求。导致问题的 angular POST 是 localhost:8080 并由 Spring Social 处理。

编辑 3： 所以我注意到只有当 spring social 将 GET 发送到 google / facebook 而不是我自己的网站时，这才是问题。对于我自己的网站，我可以使用 angular 提交 ajax post 没问题。

此外，我注意到 google 的非工作 GET 包含 Origin，而 google 的工作 GET 没有。这可能是问题所在吗？

过滤器

@Component
public class SimpleCORSFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // TODO Auto-generated method stub

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp,
            FilterChain chain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) resp;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

        chain.doFilter(req, resp);
    }

    @Override
    public void destroy() {
    }

}

Answer 1

您的 servlets/rest 服务必须设置 CORS header 并且我注意到 $http 在调用之前检查 http OPTIONS。

添加此功能的最佳方式是添加 header 条目的过滤器。

见Tomcat CORS filter

AngularJS、Spring 社交和 CORS

AngularJS, Spring Social and CORS

java

spring

spring-security

cors

spring-social