跨域问题解决

一、同源

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