跨域

跨域是前端开发常见的问题，跨域的出现是为了安全，防止XSS、CSFR等攻击。

CSRF攻击:Cross-site request forgery,跨站请求伪装。
简单解释：当你登陆了银行网站，同时打开了网站A，网站A通过读取保存在本地的银行网站信息，发送请求到银行服务器，损害你的利益。网站A的动作就叫CSRF攻击。
XSS攻击:Cross-Site Scripting,跨站执行脚本,非目标用户使浏览器执行了不被预期的脚本。闲聊一句，看字面简写应该叫CSS攻击才对吧。
简单解释：当你登陆了银行网站，同时打开了网站A，网站A通过某种方法让银行网站执行某段脚本，损害你的利益。网站A的动作就叫XSS攻击。

跨域问题完全是因为浏览器这个应用程序内的规则，如果你自己写了WINFORM的WEB控件写一个读取网页的应用程序，不遵循同源策略,那就不会有跨域问题。但也没有防XSS、CSFR等攻击的能力。

同源策略

简单的讲就是浏览器中一个网站不可获取其他网站的资源的规则。

同源策略规定：
所指的同源是域名+协议+端口。
在一个网站的源地址是http://www.glsa.com.cn:8080/，则访问的资源URL在最后一个/前的所有内容不可变，否则定义为跨域。
跨域后，不可访问
1）Cookie、LocalStorage 和 IndexDB 无法读取
2）DOM 和 JS 对象无法获取
3）网络请求不可发送

前后端分离的情况下，如果就是想访问两个站点的数据，咋办？介绍一种通用方式CORS
CORS:Cross Origin Resourse-Sharing，跨域资源共享，前后端相协调解决跨域问题，是一种在同源策略下可以跨域的验证机制。

验证方式

简单方式：

前端发送网络请求时：

网络请求是GET,POST,HEAD（跟GET方法相同，只不过服务器响应时不会返回消息体）请求。
请求头中的Content-Type请求头的值是application/x-www-form-urlencoded、multipart/form-data、text/plain

浏览器会直接发送附合简单方式跨域请求，并在header中携带Origin，值为请求网页的源地址。
后端通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头，验证origin是否附合条件，如果附合，直接返回数据。

axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.get('http://serverurl/api').then((res) => {console.log(res);
})

预先请求

前端发送网络请求时：

网络请求不是GET,POST,HEAD请求。
请求头中的Content-Type请求头的值不是application/x-www-form-urlencoded、multipart/form-data、text/plain

浏览器会先发送一个预先验证请求(Preflighted requests)，请求的header中包括了带Origin(网页的源地址),Access-Control-Request-Method(网络请求方法)、Access-Control-Request-Headers(head中的Content-Type值)。
后端通过已配置的Access-Control-Allow-Origin和Access-Control-Allow-Methods和Access-Control-Allow-Headers相对应，判断是否附合条件。验证通过，浏览器才会发送真正的跨域请求。

测试代码：

axios.defaults.headers.get['Content-Type'] = 'application/json;charset=UTF-8';
axios.put('http://serverurl/api').then((res) => {console.log(res);})

带认证的请求

默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。

xhr.withCredentials = true;

如果服务器接收带凭据的请求，会用下面的HTTP头部来响应。
Access-Control-Allow-Credentials: true
服务器还可以在Preflight响应中发送这个HTTP头部，表示允许源发送带凭据的请求。

注意，当withCredentials属性设置为true，需要response header（服务器端配置）中的'Access-Control-Allow-Origin'为一个确定的域名，而不能使用'*'这样的通配符。

Header

Request header

Origin

Origin头在跨域请求或预先请求中，标明发起跨域请求的源域名。

Access-Control-Request-Method

Access-Control-Request-Method头用于表明跨域请求使用的实际HTTP方法

Access-Control-Request-Headers

Access-Control-Request-Headers用于在预先请求时，告知服务器要发起的跨域请求中会携带的请求头信息

Response header

Access-Control-Allow-Origin
Access-Control-Allow-Origin头中携带了服务器端验证后的允许的跨域请求域名，可以是一个具体的域名或是一个*（表示任意域名）。简单请求时，浏览器会根据此响应头的内容决定是否给脚本返回相应内容，预先验证请求时，浏览器会根据此响应头决定是否发送实际的跨域请求。
Access-Control-Expose-Headers
Access-Control-Expose-Headers头用于允许返回给跨域请求的响应头列表，在列表中的响应头的内容，才可以被浏览器访问。
Access-Control-Max-Age
Access-Control-Max-Age用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。
Access-Control-Allow-Credentials
Access-Control-Allow-Credentials用于告知浏览器当withCredentials属性设置为true时，是否可以显示跨域请求返回的内容。简单请求时，浏览器会根据此响应头决定是否显示响应的内容。预先验证请求时，浏览器会根据此响应头决定在发送实际跨域请求时，是否携带认证信息。
Access-Control-Allow-Methods
Access-Control-Allow-Methods用于告知浏览器可以在实际发送跨域请求时，可以支持的请求方法，可以是一个具体的方法列表或是一个*（表示任意方法）。简单请求时，浏览器会根据此响应头的内容决定是否给脚本返回相应内容，预先验证请求时，浏览器会根据此响应头决定是否发送实际的跨域请求。
Access-Control-Allow-Headers
Access-Control-Allow-Headers用于告知浏览器可以在实际发送跨域请求时，可以支持的请求头，可以是一个具体的请求头列表或是一个*（表示任意请求头）。简单请求时，浏览器会根据此响应头的内容决定是否给脚本返回相应内容，预先验证请求时，浏览器会根据此响应头决定是否发送实际的跨域请求。

Springboot 设置后端跨域方式

1:在controller上直解加注解@CrossOrigin,可使用在方法或者类上

@CrossOrigin
@RequestController
public ApiController{@RequestMapping(value="/api")public String api() {return "test";}
}

2:注入Bean

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")    // 允许跨域访问的路径//.allowedOrigins("*")    // 允许跨域访问的源.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")    // 允许请求方法.maxAge(168000)    // 预检间隔时间.allowedHeaders("*")  // 允许头部设置.allowCredentials(true);    // 是否发送cookie}
}

3:使用filter

@Configuration
public class MyConfiguration {@Beanpublic FilterRegistrationBean corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);config.addAllowedOrigin("http://domain.com");config.addAllowedHeader("*");config.addAllowedMethod("*");source.registerCorsConfiguration("/**", config);FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(config));bean.setOrder(0);return bean;}
}

nigix配置跨域

if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' 'http://server.url'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS'; add_header 'Access-Control-Allow-Headers' '*'; }if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' 'https://server.url'; add_header 'Access-Control-Allow-Credentials' 'false'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS'; add_header 'Access-Control-Allow-Headers' '*'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' ' false'; add_header 'Access-Control-Allow-Methods' '*'; add_header 'Access-Control-Allow-Headers' '*'; }

当通过nigix反向代理->gateway->spring项目的情况，跨域不可重复设置，如果其中两个项目配置了跨域，则跨域失校。

springboot-vue跨域详解相关推荐

跨域详解！前后端分离解决跨域问题
文章目录一.为什么会出现跨域问题二.什么是跨域三.非同源限制四.跨域问题的解决方式 Jsonp前后端配合前端修改后端修改 CORS 详解响应头 5. SpringBoot解决 [方式一]全 ...
什么是跨域？跨域详解
一.为什么会出现跨域问题出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...
cors跨域+php配置,CORS跨域详解
废话少数,直接上代码!!!!!!!!!! html:html> Document var url = "http://japi.juhe.cn/tv/getCategory?key=1 ...
详解SpringBoot应用跨域访问解决方案
详解SpringBoot应用跨域访问解决方案参考文章: (1)详解SpringBoot应用跨域访问解决方案 (2)https://www.cnblogs.com/zimug/p/11832737.h ...
SpringBoot—CORS跨域问题详解和解决方案
关注微信公众号:CodingTechWork,一起学习进步. 引言在前后端开发过程中,遇到过一种错误,类似于报错: Access to XMLHttpRequest at 'http://127 ...
SpringBoot 解决VUE跨域问题
今天使用VUE 调用SpringBoot 后台服务接口,提示跨域. 我参考网上解决Vue + SpringBoot 跨域代码,源码如下: package com.zzg.configuration;i ...
CORS了解与VUE跨域解决
1.CORS了解 CORS通信得关键地方就是服务器,只要服务器实现了CORS接口,就可以实现跨域通信浏览器将CORS请求分为两大类:简单请求.非简单请求简单请求基本介绍同时满足以下条件就是简单 ...
Springboot@Configuration和@Bean详解
Springboot@Configuration和@Bean详解一.@Configuration @Target({ElementType.TYPE}) @Retention(RetentionPo ...
Springboot 解决跨域的四种姿势
Springboot 解决跨域的四种姿势姿势一实现WebMvcConfigurer#addCorsMappings的方法 import org.springframework.context.an ...

springboot-vue跨域详解

跨域

同源策略

验证方式

简单方式：

预先请求

带认证的请求

Header

Springboot 设置后端跨域方式

nigix配置跨域

springboot-vue跨域详解相关推荐

最新文章

热门文章