跨域

• 跨域指的是跨域名访问，只有域名和端口一致的才算是非跨域；
• 跨域的几种情况
  • 域名不同
  • 域名相同但是端口不同
  • 二级域名不同
• 其中，域名相同但是路径不同不属于跨域
• 跨域问题是针对 ajax 请求的安全限制

跨域解决办法

• CORS
  • 是一个w3c 标准，全称为“跨域资源共享”（Cross-origin resource sharing）
• jsonp
• Nginx 反向代理

CORS 设置

电脑：

sudo vim /etc/hosts

127.0.0.1   api.renran.com   后台
127.0.0.1   www.renran.com   前端

前端

修改配置文件config/index.js

host: 'www.renran.cn', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
  

后端

安装模块，虚拟环境下

pip install django-cors-headers

设置 settings/dev.py

a. 添加应用

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

b. 中间层在第一个位置加入

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

c. 添加白名单

# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
    'http://www.renran.com:8000',
)
CORS_ALLOW_CREDENTIALS = False  # 不允许ajax跨域请求时携带cookie

完成了上面的步骤，我们就可以通过后端提供数据给前端使用ajax访问了。

引入 axios

前端终端安装 axios

npm i axios -S

配置 axios main.js

import axios from 'axios'; // 从node_modules目录中导入包

// 允许axios发送请求时附带cookie，设置为不允许
axios.defaults.withCredentials = false;

Vue.prototype.$axios = axios; // 把对象挂载vue中

Vue.prototype.$axios = axios; // 把对象挂载vue中