我有一个使用 Spring 和 Spring Social 构建的应用程序。
我能够连接到社交网络，效果很好。然后我有了一个好主意，在前端使用 Angular 来代替 JSP，并开始使用 Angular 来替换我用来连接社交网络的 html 表单和 http 帖子。
现在我收到错误
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.
表单帖子可以工作，但 angularjs 帖子不行。是什么赋予了？我使用 fidler 查看了失败的 Angular 帖子，将其与工作的 html 表单帖子进行了比较，发现了这一点。
使用 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
这是发布该帖子的代码
<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>
使用 angularjs 无法正常工作的 POST
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
这是发布该帖子的代码
$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 Social Framework 向 google 服务器发出的 GET 请求。我导致问题的角度 POST 是 localhost:8080 并由 Spring Social 处理。
编辑3: 所以我注意到，只有当 Spring Social 将 GET 发送到 google/facebook 而不是我自己的网站时，这才是一个问题。对于我自己的网站，我可以使用 Angular Fine 提交 ajax 帖子。
此外，我注意到非工作 GET 到 google 包含了 Origin，而工作 GET 到 google 则没有。这可能是问题所在吗？
过滤
@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() {
}
}
最佳答案
您的 servlet/rest 服务必须设置 CORS header ，并且我注意到 $http 在调用之前检查 http 选项。
添加此功能的最佳方法是使用过滤器，它添加 header 条目。
关于java - AngularJS、Spring Social 和 CORS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28970717/