1. 前端跨域问题
//原理:浏览器不能执行其他网站的脚本。由浏览器的同源策略(协议、域名、端口三全同,否则跨域)造成。跨域原理即通过各种方式避开浏览器的安全限制。
1.JSONP(JSON with Padding):JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题
1.1 原理:利用标签的src属性不受限制的特点动态创建script标签,向一个不同源的接口get请求,只支持get请求
1.2 jQuery中的jsonp:只需要添加dataType:'jsonp'
<script>
$.ajax({
url:"",
type : "get",
dataType: "jsonp",
data:{id:1},
success: function(backData){alert(backData)};
)}
</script>
2.CORS(Cross Origin Resource Share资源共享):原理是服务器返回响应报文时,在响应头中设置header(服务端设置即可,若带cookie前后端都要设置)
2.1 res.setHeader('Access-Control-Allow-Origin', '*') //服务器设置CORS,允许浏览器跨域
2.2 更简单的CORS方案:express使用中间件cors,自动给每一个res设置默认请求头
//1.下包
$ npm install cors
//2. 配置中间件
var cors = require('cors')
app.use(cors()
//3.cors中间件底层原理如下
app.use((req, res, next) => {//任何请求都会进入这个use中间件
res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头
next()//执行下一个中间件 })
3.代理跨域:
vue下面有代理,图片跨域加crossorigin,接口跨域用fiddler抓包拦截掉request请求,加上header头加上cross origin all
4.配置代理(一般配的都是反向代理)
说明: 代理会有正向代理(VPN,翻墙工具),反向代理(转发资源,解决跨域)
正向代理的特点:代理(隐藏)客户端,服务器并不知道真实发请求的那个客户端是谁
反向代理的特点: 代理的是服务端,客户端并不知道你访问的到底是哪台服务器
前端主要是在开发环境来配置 (测试和生产环境由后端或运维来配置)
方案: webpack devServer (开发环境方案) node、 nginx 配置(测试和生产环境方案)
2. 后端跨域问题
/**
* 跨域配置
*/
@Bean
public CorsFilter corsFilter()
{
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
// 设置访问源地址
config.addAllowedOrigin("*");
// 设置访问源请求头
config.addAllowedHeader("*");
// 设置访问源请求方法
config.addAllowedMethod("*");
// 对接口配置跨域设置
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
报错:Get top window error, error: DOMException: Blocked a frame with origin “https://login.dingtalk.com” from accessing a cross-origin frame
问题:后端跨域问题解决