Discuss / Java / 为什么我设置了端口就会跨域失败?
Back

为什么我设置了端口就会跨域失败?

Topic source

用户5273497715

#1 Created at ... [Delete] [Delete and Lock User]

就像这样，访问 https://www.liaoxuefeng.com:443 成功打开页面，说明端口没错

@Overridepublic void addCorsMappings(CorsRegistry registry) {
   registry.addMapping("/api/**")
         .allowedOrigins("https://www.liaoxuefeng.com:443")
         .allowedMethods("GET","POST")
         .maxAge(3600);
}

然后在老师的网页敲F12，输入

$.getJSON( "http://localhost:8080/api/users", (data) => console.log(JSON.stringify(data)));

出现了跨域错误

Access to XMLHttpRequest at 'http://localhost:8080/api/users' from origin 'https://www.liaoxuefeng.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

但如果改成这样，就可以成功，responseJSON 也不再是undefined

@Overridepublic void addCorsMappings(CorsRegistry registry) {
   registry.addMapping("/api/**")
         .allowedOrigins("https://www.liaoxuefeng.com")
         .allowedMethods("GET","POST")
         .maxAge(3600);
}

responseJSON: Array(2)
0: {id: 0, email: "imaccep@gmail.com", password: "qweasd", name: "asd", createdAt: 1604969530481, …}
1: {id: 1, email: "74612109@163.com", password: "74612109", name: "74612109", createdAt: 1604969553287, …}
length: 2

为什么设置了端口就会跨域失败?

用户5273497715

#2 Created at ... [Delete] [Delete and Lock User]

还有一个问题：不知道设置 CorsRegistry.maxAge(3600) 有啥用

MDN对 pre-flight request 的解释是

一个 CORS 预检请求是用于检查服务器是否支持 CORS 即跨域资源共享。

但我没有设置 maxAge(3600) 的话也没啥问题，一样可以访问到，

设置 maxAge(10) 也并没有在10秒后就无法通过

$.getJSON( "http://localhost:8080/api/users", (data) => console.log(JSON.stringify(data)));

获取到数据资源了

就是有气派

#3 Created at ... [Delete] [Delete and Lock User]

Configure how long in seconds the response from a pre-flight request can be cached by clients.

By default this is set to 1800 seconds (30 minutes).

大概就是缓存的有效时间

就是有气派

#4 Created at ... [Delete] [Delete and Lock User]

啊怎么少了一段。。。

你输入的是 https://www.liaoxuefeng.com:443 但你最后访问的页面是 https://www.liaoxuefeng.com 所以请求是从 https://www.liaoxuefeng.com发出的，当然无法访问

程天阳PATRICK

#5 Created at ... [Delete] [Delete and Lock User]

MDN 里面是这样说的

最后，首部字段 Access-Control-Max-Age 表明该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。

关于预检请求则是这样说的

跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

也就是说对于同样的请求，在 max-age 规定的时间内就不用再次通过预检了，就可以直接请求了

  • 1

Reply