- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用:
我正在使用 Django、GraphQL 和 Vue-Apollo 测试单页 Vue 应用程序。
如果我在我的 View 中使用 csrf_exempt
,那么一切都在前端工作。
urlpatterns = [
<...>
path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True))),
<...>
现在我想用 CSRF 保护我的请求。在理解 CSRF 保护的过程中,我认为所有 Django GraphQLView
需要的是在请求 header 中接收 X-Csrftoken
的“值”。所以我专注于以不同的方式发送 csrf
值......通过像这样的单一 View
path('csrf/', views.csrf),
path("graphql", GraphQLView.as_view(graphiql=True)),
或使用 ensure_csrf_cookie
确保 cookie
之后,在我的 ApolloClient
中,我获取这些 Value 并将其与请求 Header 一起发回。
这是我从 Django-Vue 页面发送 GraphQL 请求时 Django 打印的内容。
Forbidden (CSRF token missing or incorrect.): /graphql
Parallel 我总是使用 graphiql IDE
进行测试,这些请求仍然有效。我还每次打印查询解析器的 info.context.headers
值。
{'Content-Length': '400', 'Content-Type': 'application/json',
'Host': 'localhost:7000', 'Connection': 'keep-alive',
'Pragma': 'no-cache', 'Cache-Control': 'no-cache',
'Accept': 'application/json', 'Sec-Fetch-Dest': 'empty', 'X-Csrftoken': 'dvMXuYfAXowxRGtwSVYQmpNcpGrLSR7RuUnc4IbIarjljxACtaozy3Jgp3YOkMGz',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36',
'Origin': 'http://localhost:7000',
'Sec-Fetch-Site': 'same-origin', 'Sec-Fetch-Mode': 'cors',
'Referer': 'http://localhost:7000/graphql', 'Accept-Encoding': 'gzip, deflate, br', 'Accept-Language': 'en-US,en;q=0.9,de;q=0.8',
'Cookie': 'sessionid=jqjvjfvg4sjmp7nkeunebqos8c7onhiz; csrftoken=dvMXuYfAXowxRGtwSVYQmpNcpGrLSR7RuUnc4IbIarjljxACtaozy3Jgp3YOkMGz'}
我认识到 GraphQLView IDE
总是将 X-Csrftoken
和 Cookie:..csrftoken.
也放在请求中。如果在发送请求之前删除 GraphQLView IDE
的 csrftoken-cookie,我会得到这个
Forbidden (CSRF cookie not set.): /graphql
IDE 显示一个长长的红色报告
.... CSRF verification failed. Request aborted.</p>\n\n\n
<p>You are seeing this message because this site requires a CSRF cookie when submitting forms.
This cookie is required for security reasons, to ensure that your browser is not being hijacked by third parties.</p>\n
IDE 的信息说请求需要一个 CSRF cookie。但到目前为止,在论坛、Doc 上阅读的所有内容都与值(value)本身更相关。这意味着您只需要将 header 中的 csrf 值作为 X-Csrftoken
左右发送,View 就会发挥作用。
问题
因此我的问题是:
我是否必须在我的 ApolloClient
中同时设置 X-Csrftoken
和 Cookie:..csrftoken
才能制作一个在我的 django GraphQLView
上请求?
或者是否也可以只发送 X-Csrftoken
而没有 csrf-cookie
,反之亦然?
最佳答案
经过长时间的停顿来关注这个问题,我再次尝试并找到了解决方案。
设置
推定
STATICFILES_DIRS
中编写我的 *vue.js
文件时,Webpack DevServer 将热重载。 Django 将从那里获取文件。工作正常问题回顾
重新审视我的问题后,我发现我有 2 个问题。一个是浏览器因为 CORS 而拒绝了 graphQL 请求。第二个是 CSRF token 。
解决方案
为了修复 CORS 问题,我注意到我的 Apollo 客户端的 uri
与我的 Django Dev Server 不同。 http://127.0.0.1:7000/graphql
被设置为 http://localhost:7000/graphql
。我还设置了 credentials
(参见 vue-apollo.js)
为了修复 CSRF,我做了 3 件事
{% csrf_token %}
,其中包含您的 Vue/GraphQL 客户端应用 Hook 的 HTML。以便我们稍后获取它。js-cookie
获取Cookievue-apollo.js
中使用 X-CSRFToken
在 Apollo Client Constructor 中设置 header vue-apollo.js
import Vue from 'vue'
// import path for the new Apollo Client 3 and Vue-Apollo
import { ApolloClient, InMemoryCache } from '@apollo/client/core';
import VueApollo from 'vue-apollo'
import Cookies from 'js-cookie'
// Create the apollo client
const apolloClient = new ApolloClient({
// -------------------
// # Required Fields #
// -------------------
// URI - GraphQL Endpoint
uri: 'http://127.0.0.1:7000/graphql',
// Cache
cache: new InMemoryCache(),
// -------------------
// # Optional Fields #
// -------------------
// DevBrowserConsole
connectToDevTools: true,
// Else
credentials: 'same-origin',
headers: {
'X-CSRFToken': Cookies.get('csrftoken')
}
});
// create Vue-Apollo Instance
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
// Install the vue plugin
Vue.use(VueApollo)
export default apolloProvider
Vue.config.js
const BundleTracker = require("webpack-bundle-tracker");
// hook your apps
const pages = {
'page_1': {
entry: './src/page_1.js',
chunks: ['chunk-vendors']
},
'page_2': {
entry: './src/page_2.js',
chunks: ['chunk-vendors']
},
}
module.exports = {
pages: pages,
filenameHashing: false,
productionSourceMap: false,
// puplicPath:
// Tells Django where do find the bundle.
publicPath: '/static/',
// outputDir:
// The directory where the production build files will be generated - STATICFILES_DIRS
outputDir: '../dev_static/vue_bundle',
chainWebpack: config => {
config.optimization
.splitChunks({
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "chunk-vendors",
chunks: "all",
priority: 1
},
},
});
// Don´t create Templates because we using Django Templates
Object.keys(pages).forEach(page => {
config.plugins.delete(`html-${page}`);
config.plugins.delete(`preload-${page}`);
config.plugins.delete(`prefetch-${page}`);
})
// create webpack-stats.json.
// This file will describe the bundles produced by this build process.
// used eventually by django-webpack-loader
config
.plugin('BundleTracker')
.use(BundleTracker, [{filename: '/webpack-stats.json'}]);
// added to use ApolloQuery Tag (Apollo Components) see vue-apollo documentation
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.transpileOptions = {
transforms: {
dangerousTaggedTemplateString: true,
},
}
return options
})
// This will allows us to reference paths to static
// files within our Vue component as <img src="~__STATIC__/logo.png">
config.resolve.alias
.set('__STATIC__', 'static')
// configure a development server for use in non-production modes,
config.devServer
.public('http://localhost:8080')
.host('localhost')
.port(8080)
.hotOnly(true)
.watchOptions({poll: 1000})
.https(false)
.headers({"Access-Control-Allow-Origin": ["*"]})
// DO have Webpack hash chunk filename
config.output
.chunkFilename("[id].js")
},
devServer: {
writeToDisk: true
}
};
关于django - Graphite 烯 django 端点是否同时需要 X-Csrftoken 和 CsrfCookie?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60533674/
有没有办法简单地显示选定时间段内值的变化?我感兴趣的是最后一个值与初始值相比的偏移量。在一段时间内,这些值可能会高于和低于这些值,这并不是真正相关的(并且在我的情况下是异常(exception))。
我目前正在使用 Ganglia 收集监控指标,我想使用 Graphite 显示包含该数据的图表。我知道这样的集成是可能的,我找到了 article描述应该如何做。我不太确定这种集成是如何工作的,尤其是
我已经在专用的 Ubuntu 服务器上安装了 Graphite,它正确地收集了自己的系统性能数据,例如cpu 使用率 和 load_avg 并将其发送到 Carbon,然后我可以在 Graphite
我们需要收集多个服务器和业务流程上的时间序列信息,并考虑使用 Graphite 。如果我们想显示原始数据似乎很好。但是,如果我们想对这些数据进行 BI 并运行自定义查询怎么办? Graphite 是否
让我们想象一下我在 Graphite 中有这个查询: level1.level2.*.level4.count 我希望我的别名是level is: level3 但我找不到路。 看完graphite
假设我有一个名为 a.b.c.count 的指标.我正在尝试编写一个 python 脚本来读取度量的最新值 a.b.c.count在 Graphite 中。 我浏览了文档并发现我们可以使用 curl
我有一个应用程序,它通过statsd向 Graphite 发布许多统计信息。每当服务接收到一条消息时,其中一个统计信息就会简单地向statsd发送一个统计增量。我需要显示一个图表,显示此统计信息随时间
前段时间我用 nginx 部署了 Graphite ,有厨师,但没有卡住要安装的版本。因此,现在,尝试使用相同的配方进行安装时,由于缺少与版本相关的内容而出现错误。 我需要找到我在其他 CentOS
我们运行 etsy/statsd 节点应用程序,它每 10 秒将统计信息刷新到 carbon/whisper。如果您发送 100 个增量(计数),在前 10 秒内,graphite 会正确显示它们,例
如何将我的指标保存在根级别。当前已保存在统计层次结构下(请参阅 graphite )想要保存在顶层(Graphite)下 最佳答案 将这些设置添加到您的 statsd 配置文件中(可能类似于 /etc
我有一个计数器指标,我将其称为a.metric.count 正常绘制时,这将是一条不断增加的向上线,这没有多大用处。我想要的是显示每小时发生的事件数。 最佳答案 使用derivative函数,如下所述
我想删除 Graphite 的存储耳语数据,但 Graphite 文档中没有任何内容。 我所做的一种方法是手动删除 /opt/graphite...../whispers/stats... 中的文件。
我在网上搜索过,但找不到任何漂亮的 Graphite 模板,这些模板可以放置在 graphtemplates.conf 中,并通过在查询字符串中添加 ?template=[name] 来在图表中使用。
我正在开始检测 Web 应用程序,并使用 StatsD 收集尽可能多的相关指标。例如,以下是我当前使用的高级指标名称的一些示例: http.responseTime http.status.4xx h
在设置 Graphite 时,我不小心将保留期设置为 1800 天而不是 180 天。 '10s:6h,10min:1800d' 据我了解,现在更改保留不会清除旧数据。我不确定如何在不破坏我们拥有的所
我正在使用 Graphite 和 Collectd 来监控我的服务器。特别是,我正在使用 tail插件来计算失败的 SSH 登录。我正在为这个指标使用一个计数器,所以希望看到 1、2、3、0 等...
我正在准备重构一些Graphite指标名称,并希望能够保留历史数据。 .wsp文件是否可以重命名(如果更高级别的组件发生更改,则可以将其移动到新目录中)吗? 示例:group.subgroup1.me
我正在遵循这些说明(https://www.digitalocean.com/community/tutorials/how-to-install-and-use-graphite-on-an-ubu
每次用户连接到我的网站时,我都会发送一条消息。 使用这种格式: "user_login 1 13xxxxxxx" (key value timestamp) 我的问题是 Graphite 给我一个图
我正在玩grafana,我想创建一个面板,在其中比较一台应用服务器的数据与其他服务器的平均值。就像是: apps.machine1.someMetric averageSeries(apps.*.no
我是一名优秀的程序员,十分优秀!