一、同源
1、定义
协议 + IP + 端口号 都一样的url称为同源,来自同一服务器
2、同源策略
浏览器为了安全起见,有一个约束,要求浏览器执行的脚本只能同源访问。默认如果访问的不是同源,则拦截这个访问
3、目的
是为了保证⽤户信息的安全,防⽌恶意的⽹站窃取数据
4、解决方案
- jsonp
- CORS
- 代理解决跨域
二、跨域解决办法
1、jsonp ---- 在html页面中通过相应的标签从不同域名下加载静态资源文件
缺点:只能够实现get请求
function handleResponse(response){
console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下:
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成
2、前端跨域----vue.config.index.js中配置代理,避免跨域
proxyTable: {
'/api': {
'target': 'http://localhost:8000', // 目标地址 我们的django地址
"changeOrigin": true, //要不要改变源 要
"pathRewrite": { // 重写路径 把/api 转成空字符串
'^/api': ''
}
}
},
3、后端跨域------ corsheaders
详解Githbub:django-cors-headers
- 安装cors-headers模块
pip install django-cors-headers
- django项目的 settings.py中 配置(简单版本)
# 第一步 注册cors-headers
INSTALLED_APPS = [
...
'corsheaders',
...
]
# 第二步 配置中间件,要在CommonMiddleware之前
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
# 第三步 : 配置所有源访问
CORS_ORIGIN_ALLOW_ALL=True