CORS Preflight 请求 - 标头中的自定义身份验证令牌 - Spring 和 Angular 4
Posted
技术标签:
【中文标题】CORS Preflight 请求 - 标头中的自定义身份验证令牌 - Spring 和 Angular 4【英文标题】:CORS Preflight request - Custom auth token in header - Spring and Angular 4 【发布时间】:2018-04-23 23:07:42 【问题描述】:我在本地服务器上使用令牌作为标头请求简单 GET 时遇到问题。 我的浏览器不断通过简单的 GET 请求发送预检请求。
我用 postman / curl 试过了,没有任何问题。
这是实际代码: 服务器(春季):
@Override
public void doFilter(final ServletRequest req, final ServletResponse res,
final FilterChain chain) throws IOException, ServletException
final HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods",
"POST, GET, PUT, OPTIONS, DELETE, PATCH");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, x-auth-token, Content-Type");
response.setHeader("Access-Control-Expose-Headers", "x-auth-token");
response.setHeader("Access-Control-Allow-Credentials", "true");
final HttpServletRequest request = (HttpServletRequest) req;
if (request.getMethod().equals("OPTIONS"))
try
response.getWriter().print("OK");
response.getWriter().flush();
catch (IOException e)
e.printStackTrace();
else
chain.doFilter(request, response);
所以我的x-auth-token
是一个类似 jwt 的令牌。
在我的 Angular 代码中,我只是将我的令牌添加为 x-auth-token
,如下所示:
getAll()
return this.http.get('http://127.0.0.1:8080/module', this.jwt()).map((response: Response) => response.json());
private jwt()
// create authorization header with jwt token
let token = localStorage.getItem('user');
let obj = JSON.parse(token)
console.log(obj.token.token)
if (obj.token)
let headers = new Headers(
'x-auth-token': obj.token.token,
'Content-Type': "application/json"
);
return new RequestOptions( headers: headers );
请注意,我的身份验证/注册路由工作正常,我只是无法将我的 x-auth-token
标头传送到我的 Spring 服务器。
我的两个网络服务器都在本地运行:8080 上的 Spring 和 8000 上的 Angular。
任何帮助将不胜感激,
谢谢,
【问题讨论】:
您的令牌应该是string
类型还是json
对象?
这是string
您可以在 teamviewer 中使用吗?还是谷歌浏览器远程桌面?
感谢您的提问,但我在工作计算机上,无法访问屏幕共享。
我可以调试并找出问题
【参考方案1】:
首先,postman 和 curl 不是测试 CORS 的好方法,因为它们不强制执行与标准浏览器相同的源策略。即使在浏览器中失败的情况下,它们也能正常工作。
其次,您的请求被浏览器预先发送的原因是它不是simple request,因为x-auth-token
标头和application/json
Content-Type。只有application/x-www-form-urlencoded
简单请求中允许使用 multipart/form-data
和 text/plain
内容类型。
我认为问题出在 OPTION 响应中。确保它包含所有相关的标题。它可能会失败,或者您正在丢失添加的标头,因为您处理它的方式与其他响应不同。
【讨论】:
以上是关于CORS Preflight 请求 - 标头中的自定义身份验证令牌 - Spring 和 Angular 4的主要内容,如果未能解决你的问题,请参考以下文章
Amazon S3 CORS 标头仅在 OPTIONS(预检)期间显示,而不在 GET 请求期间显示
对 CORS preflight OPTIONS 请求的响应是 Laravel API 中的 500 Internal Server Error
[CORS][Spring Security] PreFlight 请求未处理
已解决 - CORS、OPTIONS 和 PreFlight 问题 在 Vue.js 中使用 Axios 使用 REST API