app网站样式网站建设基本流程心得

当前位置： 首页 > news >正文

app网站样式,网站建设基本流程心得,舜元建设集团官方网站,wordpress 禁止目录浏览一、什么是 CORS CORS(Cross-Origin Resource Sharing) 是由 W3C制定的一种跨域资源共享技术标准#xff0c;其目就是为了解决前端的跨域请求。在JavaEE 开发中#xff0c;最常见的前端跨域请求解决方案是早期的JSONP#xff0c;但是JSONP 只支持 GET 请求#xff0c;这是一…一、什么是 CORS CORS(Cross-Origin Resource Sharing) 是由 W3C制定的一种跨域资源共享技术标准其目就是为了解决前端的跨域请求。在JavaEE 开发中最常见的前端跨域请求解决方案是早期的JSONP但是JSONP 只支持 GET 请求这是一个很大的缺陷而 CORS 则支特多种HTTTP请求方法也是目前主流的跨域解决方案。 CORS中新增了一组HTTP 请求头字段、通过这些字段服务器告诉浏览器那些网站通过浏览器有权限访问哪些资源。同时规定对那些可能修改服务器数据的HTTP请求方法 (如GET以外的HTTTP 请求等)浏览器必须首先使用OPTIONS 方法发起一个预检请求(prenightst)预检请求的目的是查看服务端是否支持即将发起的跨域请求如果服务端允许才包实际的 HTTP 请求。在预检请求的返回中服务器端也可以通知客户端是否需要携带身份凭证 (如 Cookies、HTTP 认证信息等)。 这是浏览器的一种同源策略安全考虑如果非同源请求需要有一个options的预检请求当预检通过后才能访问其他资源后端不会有这个问题当前页面部署的服务器和向后端发起请求如果非同源那么就会有跨域的问题 关键字同源 代表  协议 ip 端口 一致 二、跨域现象演示 我们需要新建一个工程启动本地的 localhost:8081  然后再启动一个工程端口在 8082在8082的工程中的 html页面发起一个ajax请求 2.1 后端代码 步骤创建一个基本的springweb工程新建一个普通的controller 2.1.1 pom.xml 文件 dependencies!– web 支持 –dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependency!– thymeleaf 模板 –dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependency/dependencies 2.1.2 新建controller Controller public class HomeController {RequestMapping(/)public String index() {return index;}RequestMapping(/testHello)ResponseBodypublic String testHello() {System.out.println(test Hello);return test Hello ;}} 2.1.3 新建index.html !DOCTYPE html html langen xmlns:thhttp://www.thymeleaf.org headmeta charsetUTF-8titleTitle/titlescript th:src{https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js} typetext/javascript/script /head bodyh2 spring cors web/h2scriptaxios.get(/testHello)/script/body /html 2.1.4 当本机访问后查看结果 2.1.5 我们用HBuilder 打开这个文件 当我们用hbuilder打开后用浏览器打开这个时候我们会新开一个端口然后我们用axios 里面使用get请求 testHello接口会发现控制台有跨域的错误提示   axios.get(http://localhost:8082/testHello).then(response {   console.log(response.data); }) .catch(error {   console.error(error); }); 三、spring web 处理策略 在spring web中已经定义了三种可以处理跨域请求方案 3.1 CrossOrigin 注解 该注解可以放到类和方法上当放到类上面时这个类下面所有的方法都生效 里面属性解释     alowCredentials: 浏览器是否应当发送凭证信息如 Cookie. allowedFeaders:请求被允许的请求头宇段 * 表示所有宇段。 exposedHeaders:哪些响应头可以作为响应的一部分暴露出来注意这里只可以一一列举通配符 * 在这里是无效的。 maxAge:预检请求的有效期有效期内不必再次发送预检请求默认是1888秒。methods:允许的请求方法* 表示允许所有方法。 origins:允许的域表示允许所有域。 3.1.1 当我们加上后再来测试 CrossOrigin(origins {})RequestMapping(/testHello)ResponseBodypublic String testHello() {System.out.println(test Hello);return test Hello ; } 我们看到这个时候可以正常输出了 3.2 使用WebMvcConfigurer 重写addCorsMappings配置 Configuration public class WebConfiguration implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/)//处理所有请求.allowCredentials(false).allowedMethods().allowedOrigins().allowedHeaders().exposedHeaders().maxAge(3600);} } 3.2.1 测试结果 我们注释掉方法上面的//CrossOrigin(origins {}) 3.3 使用CrosFilter Cosr Filter 是Spring Web 中提供的一个处理跨域的过滤器开发者也可以通过该过该过滤器处理跨域。 Beanpublic FilterRegistrationBeanCorsFilter corsFilter() {FilterRegistrationBeanCorsFilter registrationBean new FilterRegistrationBean();CorsConfiguration configuration new CorsConfiguration();configuration.setAllowCredentials(false);configuration.setAllowedMethods(Arrays.asList());configuration.setAllowedHeaders(Arrays.asList());configuration.setAllowedOriginPatterns(Arrays.asList());configuration.setMaxAge(3600L);UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource new UrlBasedCorsConfigurationSource();urlBasedCorsConfigurationSource.registerCorsConfiguration(/, configuration);registrationBean.setFilter(new CorsFilter(urlBasedCorsConfigurationSource));registrationBean.setOrder(-1);return registrationBean;} 测试同样可以达到效果 四、spring security 处理方案 当我们为项目添加了Spring Security 依赖之后发现上面三种跨域方式有的失效了有则可以继续使用这是怎么回事? 通过CrossOrigin 注解或者重写 addCorsMappings 方法配置跨域统统失效了通CorsFilter配置的跨域有没有失效则要看过滤器的优先级如果过滤器优先级高于SpSecurity 过滤器即先于Spring Security 过滤器执行则CorsFiter 所配置的跨域处理依然有效;如果过滤器优先级低于Spring Security 过滤器则CorsFilter 所配置的跨域处理就会失效。 4.1 导入security 依赖 !– SpringSecurity依赖–dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-security/artifactId/dependency 我们看到又跨域请求又出现了我们该怎么解决呢 4.2  过滤器顺序 为了理清楚这个问题我们先简略了解一下 Filter、DispatchserServlet 以及Interceptor执行顺序。 我们再来看跨域请求过程。由于非简单请求都要首先发送一个预检请求request)而预检请求并不会携带认证信息所以预检请求就有被 Spring Security 拦截的可能。因此通过CrossOrigin 注解或者重写 addCorsMappings 方法配置跨域就会失效。如果使用 CorsFilter 配置的跨域只要过滤器优先级高于 SpringSecurity 过滤器就不会有问题。反之同样会出现问题。 4.3 解决方案 Spring security 为我们提供了更优秀的解决方案 Configuration public class SecurityConfiguration extends WebSecurityConfigurerAdapter {Overrideprotected void configure(HttpSecurity http) throws Exception {http.authorizeRequests().anyRequest().authenticated().and().formLogin().and().cors().configurationSource(configurationSource()) //处理跨域请求.and().csrf().disable();}/*** 配置spring security 跨域解决方案* return/public CorsConfigurationSource configurationSource() {CorsConfiguration configuration new CorsConfiguration();configuration.setAllowCredentials(false);configuration.setAllowedMethods(Arrays.asList());configuration.setAllowedHeaders(Arrays.asList());configuration.setAllowedOriginPatterns(Arrays.asList());configuration.setMaxAge(3600L);UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration(/**, configuration);return source;}4.3.1 查看效果 我们看到没有报跨域的错误了但是有一个302 重定向的错误是因为这台浏览器没有登录重定向登录页面了