#yyds干货盘点# 浏览器跨域服务器端关键配置

#yyds干货盘点# 浏览器跨域服务器端关键配置

浏览器发起跨域请求的时候，服务器默认是不允许跨域的。但是我们也可以进行配置，然后就可以允许特定的跨域了！

那么，服务器端应该怎么做呢？

服务器跨域配置示例

关键配置是：

import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.cors.CorsConfiguration;import org.springframework.web.cors.UrlBasedCorsConfigurationSource;import org.springframework.web.filter.CorsFilter;import java.util.ArrayList;import java.util.List;@Configurationpublic class CorsFilterConfiguration { @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); List allowedOrigins = new ArrayList<>(); allowedOrigins.add("*"); List allowedMethods = new ArrayList<>(); allowedMethods.add("*"); List allowedHeaders = new ArrayList<>(); allowedHeaders.add("*"); List exposedHeaders = new ArrayList<>(); exposedHeaders.add("Link"); exposedHeaders.add("X-Total-Count"); corsConfiguration.setAllowedOrigins(allowedOrigins); corsConfiguration.setAllowedMethods(allowedMethods); corsConfiguration.setAllowedHeaders(allowedHeaders); corsConfiguration.setExposedHeaders(exposedHeaders); corsConfiguration.setAllowCredentials(true); corsConfiguration.setMaxAge(1800L); source.registerCorsConfiguration("/api/**", corsConfiguration);return new CorsFilter(source); }}

如上，关键配置是：allowedOrigins，allowedMethods，allowedHeaders，exposedHeaders

比如A网站想访问B网站，那么B网站可以进行如上的配置。

跨域配置详细说明

关键配置之allowedOrigins、allowedMethods

allowedOrigins， 表示当前服务器允许的源网站域名。A网站想访问B网站。那么B的CORS配置就是需要包括A网站的域名。* 表示任意，如果不是那么、准备公开的资源、服务，比如新闻、天气服务，那么*就好。这个其实很容易就测试得到结果。

allowedMethods，表示允许A发起跨域请求的允许方法。可以设置get、post 等等，* 表示任意。同上，这个很容易就测试得到结果。

关键配置之allowedHeaders

allowedHeaders，表示允许A发起跨域请求的允许的请求头。* 表示任意；如果出现了不允许的请求头，那么就不允许跨域，就失败，就响应 401 或403。

关键配置之exposedHeaders

exposedHeaders，表示允许暴露的请求头。什么叫做暴露的请求头呢？ 这个我测试了很久。后面终于算是明白了。

目标域名的 web服务器 配置：

.exposedHeaders("X-Powered-By")

然后刷新测试，可以看到， options 请求的 响应头多了个

Access-Control-Expose-Headers: X-Powered-By

那么， 他有什么用呢？

修改一下代码，做更多测试。html 里面的 js 发起跨域请求：

服务端是：

@CrossOrigin(origins = " @RequestMapping(value = "/addclothesright") public List GetTest4Right(HttpServletRequest request, HttpServletResponse response) { System.out.println("UmcFileController.GetTest4Right"); response.addHeader("ea"eee"); // 特意增加了几个请求头 response.addHeader("aaaa", "AA"); // 特意增加了几个请求头 response.addHeader("bbb", "BB"); // 特意增加了几个请求头 return null;}

但是， 几个响应头全部都有返回， 我期望是只返回 ea设置没有起作用？ 真是郁闷了！

为什么啊， 后面终于明白了， 这里看到的 确实是全部返回的， 但是 不是客户端能够获取的：

只有 getAllResponseHeaders 返回的 才是真正可见的。

关键配置之allowCredentials

allowCredentials 表示是否允许 cookie。这个我也是测试了很久。后面终于算是明白了。

发起默认跨域请求的时候，xhr不携带cookie。如果跨域请求携带了 cookie， 而 目标web 服务器不允许cookie ，那么就报 cors error 的错， 尽管请求 状态码是 200。

跨域请求如何携带cookie？可以这样：

在跨域请求发起端设置： xhr.withCredentials=true。 默认 xhr 的 withCredentials 是false 的， 即它默认是不会发送cookie 。

此时如果后端设置了 不允许。

web 服务器不允许cookie 怎么设置？ 很简单，就是不设置setAllowCredentials， 或者设置 corsConfiguration.setAllowCredentials(false);

那么跨域请求还是会失败，如下：

同时， 浏览器console 可以看到这个错误：

Access to XMLHttpRequest at 'from origin 'has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

...

POST net::ERR_FAILED 200

...

Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'testCors (返回了 Cookie，

response.addCookie(new Cookie("cccc", "vvvv"));

corsConfiguration.setExposedHeaders(Arrays.asList("ea脚本获取cookie 或如下的报错：

VM1375:1 Refused to get unsafe header "Set-Cookie"

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。