问题一:

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打开前端文件即可解决问题。

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐