问题一:

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

 

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐