高质量搬砖工人必会——Vue利用axios发起ajax请求遇到的问题（been blocked by CORS policy:；Failed to load resource: net::ERR_F）

问题一：

Access to XMLHttpRequest at 'http://192.168.0.102:8000/students/' from origin 'null' has been blocked by CORS policy

1.1 导致这个问题的主要原因是：

axios的ajax请求跨域请求默认情况下不允许。（当地址的协议、主机、端口任意一个不同时都属于跨域访问）。这样做是为了防止跨站攻击保证服务器安全。

1.2 解决方法

1.2.1 方法一：通过后端解决

        通过后端专门的CORS解决方案（django和spring都有各自对应的cors解决方案），这里以django为例：

（1）首先安装django-cors-headers库：pip install django-cors-headers

（2）将django-cors-headers注册到django中settings的INSTALLED_APPS中

（3）添加到settings中的middleware中：'corsheaders.middleware.CorsMiddleware'。注意这个中间件要防在CSRF中间件之前

（4）添加允许跨域访问的地址白名单。（这里的白名单端口需要与live server打开文件的默认端口相同，如果是用nodejs的http-server打开，则应与http-server中使用的端口相同）

CORS_ORIGIN_WHITELIST =(
    'http://192.168.0.102:5500',
)
# 设置cors的cookies
CORS_ALLOW_CREDENTIALS = True

整合settings中需要更改的代码：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 这个中间价一定要放在CSRF前面，用于解决ajax跨域问题
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apps.student',
    'corsheaders',
]

# 添加cors配置
# 设置白名单，注意这里的白名单端口号要写前端的访问端口号
# 前端通过live server打开，端口号为5500
CORS_ORIGIN_WHITELIST =(
    'http://192.168.0.102:5500',
)
# 设置cors的cookies
CORS_ALLOW_CREDENTIALS = True

问题二：Failed to load resource: net::ERR_FAILED

具体看我的另一篇文章：Failed to load resource: net::ERR_FAILED解决方案

这里我补充第二种方法更加简单：

在vscode中下载插件：live server。通过live server打开前端文件即可解决问题。