当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说
Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
同源策略又分为以下两种:
1. JSONP
JSONP 包含两部分: 回调函数和数据。
回调函数是当响应到来时要放在当前页面被调用的函数
数据就是传入回调函数中的json数据,也就是回调函数的参数了
原理: 是用script标签的src属性向后台发起接口请求,把返回来的值作为一个js处理
应用场景:只能适用于get请求接口方式,因为get请求方式把参数值拼接到url地址头上
优点: 前端不需要做过多处理,在后端解决跨域问题 ;它可以兼容低版本的浏览器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
上述实现原理:
(1) 利用script
标签,规避跨域
(2) 在客户端声明一个函数,function jsonCallBack(){}
(3) 在服务端根据客户端传来的信息,返回一个字符串
(4) 客户端,利用<script>
标签解析为可运行的JavaScript
代码,调用 jsonCallback()
函数。
2.代理服务器(以Vue为例)
webpack 给我们提供了这个功能 官网:https://webpack.docschina.org/concepts/
在前端服务和后端接口服务之间 架设一个中间代理服务,它的地址保持和前端服务一致,那么:
这样,我们就可以通过中间这台服务器做接口转发,在开发环境下解决跨域问题,看起来好像挺复杂,其实vue-cli已经为我们内置了该技术,我们只需要按照要求
配置一下即可。
在vue.config.js 文件中配置:
module.exports = {
productionSourceMap:false,
// 关闭ESLINT校验工具
lintOnSave: false,
//配置代理跨域
devServer: {
proxy: {
"/api": {
target: "http:localhost:8088",
pathRewrite: {
'^/api':''} //如果后端的API都是以 api 开头,则不需要此行
},
},
},
};
3.后端服务器设置跨域(以springBoot为例)
@Configuration
public class CorsConfig {
// 当前跨域请求最大有效时长。这里默认1天
private static final long MAX_AGE = 24 * 60 * 60;
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
corsConfiguration.setMaxAge(MAX_AGE);
source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
return new CorsFilter(source);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。