高质量搬砖工人必会——Vue利用axios发起ajax请求遇到的问题(been blocked by CORS policy:;Failed to load resource: net::ERR_F)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
问题一:
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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)