- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在自己的计算机上部署了我的服务,一切运行良好,因此我决定将其放在我的服务器上。但我发现有些请求受“CORS”限制,有些则不受限制。
Web服务器是部署在Linux上的Nginx。后端框架为Django,DRF提供api服务。前端框架为Vue.js。Ajax请求库使用'axios'。代码在我自己的 Mac 上运行非常完美,没有 CORS 问题。但是在服务器上出现了问题。顺便说一下,Vue.js 中路由的模式是 history
mode。
这是我的 Nginx 配置代码:
server {
listen 80;
server_name 167.179.111.96;
charset utf-8;
location / {
root /root/blog-frontend/dist;
try_files $uri $uri/ @router;
index index.html;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
这是我的 Vue.js 代码,它存在“CORS”问题。
主要.js
Vue.prototype.API = api
Vue.prototype.GLOBAL = global
Vue.prototype.$axios = Axios;
Axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
Axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'
重定向.vue
<template>
<div id="notfound">
<div class="notfound">
<div class="notfound-404">
<h1>Redirect</h1>
</div>
<h2>Wait a few seconds, page is redirecting</h2>
<p>You are logging...authorization code is {{code}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'redirect',
data(){
return{
code:''
}
},
created () {
this.code = this.$route.query.code
this.$axios({
method: 'get',
url: this.API.oauth_redirect,
params:{
code:this.code
},
}).then((response)=>{
if (response.data.status===200){
this.$message.success('login success')
let data = response.data.data
this.$store.commit('SET_TOKEN', data['token'])
this.$store.commit('SET_USER', data)
}
else{
console.log(response.data.msg)
this.$message.error(response.data.msg)
}
this.$router.go(-1)
})
}
}
</script>
我的后端代码:中间件.py
from django.utils.deprecation import MiddlewareMixin
CORS = {
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Origin': '*'
}
class MyMiddle(MiddlewareMixin):
def process_response(self, request, response):
if request.method == 'OPTIONS':
response['Access-Control-Allow-Methods'] = CORS['Access-Control-Allow-Methods']
response['Access-Control-Allow-Headers'] = CORS['Access-Control-Allow-Headers']
response['Access-Control-Allow-Origin'] = CORS['Access-Control-Allow-Origin']
return response
设置.py
import os
# production environment
if os.environ['LOGNAME'] == 'weiziyang':
CLIENT = 'https://localhost:8080'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'OPTIONS': {
'database': 'mysite',
'user': 'root',
'password': '********',
'charset': 'utf8mb4',
},
}
}
GITHUB_CLIENT_ID = '7198b5e59a7094f2a198'
GITHUB_CLIENT_SECRET = '***********'
else:
CLIENT = 'https://167.179.111.96:80'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'OPTIONS': {
'database': 'mysite',
'user': 'root',
'password': '******',
'charset': 'utf8mb4',
'init_command': 'SET storage_engine=INNODB;'
},
}
}
GITHUB_CLIENT_ID = '83539caeb4c865d8f3e6'
GITHUB_CLIENT_SECRET = '***********'
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
AUTH_USER_MODEL = 'user.BlogUsers'
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8080',
'http://localhost:8080',
'http://167.179.111.96:80',
'http://167.179.111.96'
)
ALLOWED_HOSTS = ['*']
CORS_ALLOW_METHODS = (
'GET',
'POST',
'PUT',
'PATCH',
'DELETE',
'OPTIONS'
)
CORS_ALLOW_HEADERS = (
'x-requested-with',
'content-type',
'accept',
'origin',
'authorization',
'x-csrftoken'
)
预期的结果应该不包含任何 CORS 问题,因为我已经在我自己的 PC 上测试了它们。但是我得到的错误信息是:
Access to XMLHttpRequest at 'http://167.179.111.96:8000/user/info/?token=714ae00539a1e66642ea815722908477e4b4e07a' from origin 'http://167.179.111.96' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
最佳答案
DRF 建议使用这个库 django-cors-headers .来源:https://www.django-rest-framework.org/topics/ajax-csrf-cors/#cors
使用:
pip install django-cors-headers
然后将其添加到您已安装的应用中:
INSTALLED_APPS = [
...
'corsheaders',
...
]
在你的settings.py
CORS_ORIGIN_ALLOW_ALL=True
这将允许所有域。您可以在 lib 文档中阅读如何进行更好的设置。像那样:
CORS_ORIGIN_WHITELIST = [
"https://example.com",
"https://sub.example.com",
"http://localhost:8080",
"http://127.0.0.1:9000"
]
关于django - vue.js 和 django 中的访问控制允许来源问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56916448/
大家好,我完成了这个基本的 C 程序,它向输入任何给定数字集的用户显示有序集、最小值、最大值、平均值和中值。我遇到的问题是,当我打印数字时,我必须使用诸如“3.2%f”之类的东西来设置标准的精度,我怎
我有这个基于 Python 的服务守护进程,它正在执行大量多路复用 IO(选择)。 从另一个脚本(也是 Python)我想查询这个服务守护进程的状态/信息和/或控制处理(例如暂停它、关闭它、更改一些参
我读到 Fortran 对表达式求值的顺序有严格的规则。对于某些数值算法来说,这一点非常重要。 数值 C 程序如何控制浮点运算的顺序并防止编译器“优化”到不需要的运算顺序,例如将 (a*b)*c 更改
上下文: 整个问题可以概括为我正在尝试复制调用system(或fork)的行为,但在 mpi 环境中。 (事实证明,你不能并行调用system。)这意味着我有一个程序在许多节点上运行,每个节点上有一个
我考虑过控制scanf来接受c中的任何输入。我的概念是等待10秒(或任何其他时间)来接受任何输入。10秒后它将退出并且不再接收任何输入。 int main(){ int a,b,c,d; sca
我正在尝试使用生成器停止 setTimeOut 上的执行流程。我究竟做错了什么?我无法让 console.log 每 1500 毫秒退出一次。我是 node 的新手,如果我在做一件非常愚蠢的事情,请不
我希望我的应用程序的 Activity 堆栈包含同一 Activity 的多个实例,每个实例处理不同的数据。因此,我将让 Activity A 在我的 Activity 堆栈中处理数据 a、b、c 和
我有这个 bash 文件,它向设备询问 OpenSSH 的 IP、密码等。 现在,如果我使用 ssh root@ip,我必须输入密码。这真的很烦人。第二;我不能让我的脚本向它发送命令。 这就是我想要的
我正在尝试测试我有权访问的机器的缓存属性。为此,我正在尝试读取内存并对其计时。我改变工作集大小和步幅访问模式以获得不同的测量值。 代码如下所示: clock1 = get_ticks() for (i
我正在尝试编写一个 makefile 来替换用于构建相当大的应用程序的脚本之一。 当前脚本一次编译一个文件,使用 make 的主要原因是并行化构建过程。使用 make -j 16 我目前在办公室服务器
我正在制作一个小的测试程序,它演示了一个粗糙的控制台界面。 该程序是一个低于标准的典型获取行、响应程序,它甚至不识别“退出”,并希望您通过按 control-c 强制退出。在 Mingw32 上完成。
好的,我有一个 VOIP 电话。我知道电话的 IP 地址和端口,并且可以完全访问电话,我正在使用它通过 SIP 中继调用 SIP 电话。 我基本上想随时查看手机上发生的事情,但我不知道从哪里开始。 如
是否可以指定 CWinApp::WriteProfileString() 使用的应用程序名称? 如果我使用 CWinApp::SetRegistryKey 将我的公司名称设置为“MyCompany”,
我正在尝试用 Python 控制 Tor。我在 stackoverflow 上阅读了其他几个关于这个主题的问题,但没有一个能回答这个问题。 我正在寻找一种方法,以便在命令运行时为您提供“新身份”、新
最近在做一个项目,涉及到iPhone设备和手表传输数据、控制彼此界面跳转,在网上找了很多资料,发现国内的网站这方面介绍的不多,而国外的网站写的也不是很全,所以在这写这篇文章,给大家参考一下,望大神指
我想增加图中值的范围。在示例中,值的范围从 50 到 200。但是,我需要按如下方式分配值:50 75 100 125 150 175 200 并且最好使用 scale_fill_gradientn
我有一个IconButton,当按下时波纹效果是圆形的并且比按钮的面积大,我怎样才能减少点击按钮时波纹效果的大小? IconButton( constraints
我正在使用代码契约(Contract)为我的项目生成附属程序集。基本上它为项目的 MyAssembly.dll 创建一个 MyAssembly.Contracts.dll。这应该放在你的程序集旁边,但
我想使用分面绘制图形,其中面板之间的边缘不同。面板按字母顺序自动排序(按照 ggplot 中的惯例)。一个简单的例子: library(igraph) library(ggraph) g <- mak
我想为我的 Android 应用程序创建一个小部件,以显示有关位置的一些实时详细信息,例如天气。但我想在任何时候允许最多 3 个小部件实例,每个实例都有不同的位置。我不确定该怎么做,也找不到任何信息。
我是一名优秀的程序员,十分优秀!