我已经在SO上看到了很多,但没有什么能解决我的问题.
问题:
启用CSRF中间件后,Django在AJAX表单请求上响应403,说明:
"未设置CSRF cookie."
在文档之后,实现了一个JS功能,它设置了自定义的"X-CSRFToken"标头.
它按预期工作,从浏览器获取"csrftoken" cookie并将其与AJAX请求一起发布:
x-csrftoken: 1a0u7GCQG0wepZHQNThIXeYpMy2lZOf2
但回应仍然是403.
尝试的解决方案:
我已经尝试过在SO或网上找到的所有内容,特别是:
检查是否启用了中间件:
MIDDLEWARE_CLASSES = [
...
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
...
]
启用了Cookie的不同浏览器;
装饰我的观点@ensure_csrf_cookie;
{% csrf_token %}在我的模板中设置;
使用render获取正确请求上下文的快捷方式
设置自定义CSRF_COOKIE_NAME和CSRF_HEADER_NAME我的settings.py;
明确地设定CSRF_COOKIE_SECURE = False和CSRF_COOKIE_HTTPONLY = False;
明确CSRF_TRUSTED_ORIGINS设定;
测试开发和生产服务器;
即便request.META["CSRF_COOKIE_USED"] = True在我看来,正如有人建议的那样.
仍然一无所获.
头:
如果我使用@csrf_exempt并print(request.META)在我的视图中,很明显自定义标题"X-CSRFToken"存在于请求中并根据Django文档格式化,带有"HTTP_"前缀,用下划线替换连字符,全部大写:"HTTP_X_CSRFTOKEN".
更重要的是,它的价值与Django设置的cookie相匹配.
饼干:
奇怪的是,如果我尝试print(request.COOKIES)在我的视图中,在页面和表单加载上我可以看到 …
我需要在浏览器中使用自定义请求标头发出HTTP GET请求,并在流入时处理结果.Fetch API非常适用于此:
fetch('https://example.com/resource', {
method: 'GET',
headers: {
'X-Brad-Test': 'true'
},
cache: 'no-store',
mode: 'cors'
}).then((res) => {
const reader = res.body.getReader();
// etc.
});
这非常有效.由于存在自定义标头,因此浏览器会使用OPTIONS请求预先处理请求/resource.我已将服务器配置为使用204 No Content以下标头进行响应:
Access-Control-Allow-Headers: X-Requested-With, Range, If-Range, X-Brad-Test
Access-Control-Allow-Origin: *
浏览器对此感到满意,然后发出GET请求,服务器返回200 OK带有数据的内容,浏览器允许我访问响应头和正文.
当存在重定向时,问题就出现了.所述OPTIONS请求与所述成功204 No Content和相同的标头前.浏览器发出正确的GET请求,并在服务器上发送302带有Location:标头的请求.Chrome会引发以下错误:
Fetch API无法加载https://example.com/resource.从' https://example.com/resource ' 重定向到' http:// some-other-origin/resource '已被CORS策略阻止:请求需要预检,不允许遵循跨源重定向.
这是出乎意料的,对我来说似乎毫无意义.我希望浏览器遵循重定向,并为这个新位置做另一个飞行前请求,但它没有这样做.
更奇怪的是,我可以在这个客户端进行黑客攻击.我可以在没有自定义标头的情况下发出HTTP请求,通过查看Response对象找出重定向后的结果,然后使用我的自定义标头在新目标上发出第二个请求.当然,这并不适用于所有情况,我宁愿不依赖这个黑客.我宁愿找到一个合适的方法.
两个问题:
Access-Control-*我可以使用某种标题吗？我在测试我的thunk时遇到了问题,因为我的许多API调用都在使用FormData,而我似乎无法弄清楚如何在测试中模拟它.我正在使用Jest.
我的安装文件如下所示:
import 'isomorphic-fetch';
// Mocking the global.fetch included in React Native
global.fetch = jest.fn();
// Helper to mock a success response (only once)
fetch.mockResponseSuccess = body => {
fetch.mockImplementationOnce(() =>
Promise.resolve({ json: () => Promise.resolve(JSON.parse(body)) })
);
};
// Helper to mock a failure response (only once)
fetch.mockResponseFailure = error => {
fetch.mockImplementationOnce(() => Promise.reject(error));
};
但是,我在所有需要FormData的测试中收到以下错误:
ReferenceError: FormData is not defined
我试图从导入FORMDATA文件react-native-mock,下src/Libraries/Network/FormData,但没有奏效.
所以我想知道是否有人有这样的运气？
总的来说,我很难找到fetch在React Native中模拟请求的最佳方法,所以这里的任何建议都会很好.我已经尝试了jest-fetch-mocklib(并打开了一个关于FormData的问题),尝试设置nock(没有运气),这个简单的Jest实现,但还没有感觉到.
我有以下两个文件：
index.html
<html>
<head>
<meta charset="utf-8" />
<title>Web Page</title>
<style type="text/css">
.text {
display: inline-block;
font-family: tahoma;
font-size: 14px;
max-width: 400px;
background-color: #ddedff;
padding: 10px;
text-align: justify;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
get_data('info.txt');
});
function get_data(file) {
var request = new Request(file);
fetch(request).then(function(response) {
return response.text().then(function(text) {
$('.text').html(text);
});
});
}
</script>
</head>
<body>
<div class="text"></div>
</body>
<html>
info.txt
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's …原谅我的无知，但是我试图在TypeScript中实现抓取，并且我一直在浏览示例，但无法对其进行编译。我是TypeScript和Promise的新手，我找到了以下示例：
我正在尝试实现这一点：
private api<T>(url: string): Promise<T> {
return fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(response.statusText)
}
return response.json<T>()
})
}
但是，编译器显示错误：
[ts]预期0个类型参数，但得到1个。
我不确定是什么问题，但是基本上我正在尝试实现一个包装API调用以返回项目数组的类，并且我已经尝试了async / await，但似乎没有任何工作。任何帮助将不胜感激。
我在 fetch 函数的“fetchUrl”参数中收到以下错误
'string | 类型的参数 undefined' 不可分配给'RequestInfo' 类型的参数。
在这个函数中
let fetchUrl = getBaseUrlNative( process.env.APP_DATA, `/v2/marketing/app/file/${file}?cookies=${cookieSess}&expires=${Date.now()}`)
await fetch(fetchUrl, { method: 'get' , cache:"no-store" , headers: {
'Cache-Control': 'no-cache'
}})
.then(res => res.blob())
.then(res => { .......
getBaseUrlNative 是
export const getBaseUrlNative = (eUrl : string | undefined, ext : string | undefined) => {
try {
if (!eUrl) throw new Error("Error .")
return ext ? eUrl+ext : eUrl;
} catch (err) {
console.log(err)
}
}
我编写了一个自定义挂钩，它使用 SWR 从我的 API 检索数据，同时为请求设置“身份验证”标头。
该挂钩对于所有成功的请求都工作正常，但我希望能够处理失败的请求（400 状态代码）。
我可以使用结果访问状态代码，const res = await fetch(url但如何将参数中的错误返回error给挂钩的调用者？
import useSWR from 'swr';
export default function useAPI(path) {
const auth = useAuth();
const { data, error, isValidating, mutate } = useSWR(
!path ? null : `${process.env.NEXT_PUBLIC_API_URL}${path}`,
async (url) => {
const res = await fetch(url, {
headers: {
Authorization: `Bearer ${auth.user.token}`,
accept: 'application/json',
},
});
return res.json();
}
);
return { data, error, isValidating, mutate };
}
我有一个表单，可以使用 javascript fetch()API 将数据使用 PHP 提交到 MySQL 数据库。
在下面的代码中，当提交表单时，页面上会输出一条成功消息，并且通过 API 可以防止硬刷新fetch()。
板模块本身最初是通过“添加到板”元素上的单击事件显示的。
因为板列表是循环输出到页面上的while，所以我希望新的板名称也会在循环中输出，而无需刷新页面。我想我可以通过GET在单独的fetch()函数中添加一个简单的请求来做到这一点。但这不起作用（我也没有收到任何错误消息）。
当页面发生硬刷新时，新板会添加到输出列表中并按预期显示在页面上，因此我知道 PHP 在后端工作一切正常。
**编辑**
我已经输入了我尝试过的原始代码，这与@willgardner的答案基本相同。
因为我对fetch()AJAX 一般来说比较陌生 - 我是否打算在表单中构造（使用 JavaScript）一个新的按钮元素来显示请求的更新结果get？我假设 PHP 循环会在get请求发生时将其输出到页面上？就像页面最初加载时一样？
我还错过了 HTML 中的输入元素，该元素用于将post板名称发送到数据库，然后随请求取回该数据库get。现在它已被添加并且是create-board-name输入元素。
JavaScript
// Use fetch() to prevent page doing hard refresh when a new board name is created
let boardModuleForm = document.querySelector('.board-module-form'),
// URL details
myURL = new URL(window.location.href),
pagePath …我想使用本机 fetch node.js 18.3 通过代理发出请求，但我不知道如何操作。
我的代码：
import proxyAgent from 'proxy-agent';
(async () => {
const res = await fetch('https://api.ipify.org?format=json', {
agent: new proxyAgent('http://80.48.119.28:8080'),
});
const data = await res.json();
console.log(data); //it shows my ip
})();
我想创建一个自定义fetchServer方法，在执行实际的fetch.
最后，这个方法使用了fetchJavascript 的通用方法，它具有以下签名：
function fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>
所以，我是fetchServer这样写的：
export const fetchServer = async <T>(
url: string,
options: any = {},
): Promise<T> => {
...
const alteredOptions = { ...options, /* my custom code */ };
const rawResponse = await fetch(url, { ...alteredOptions});
...
};
但是，正如您所看到的，我正在使用anyfor options，因为我无法RequestInit从任何地方成功导入该类型。
我已经读过这个问题，但它来自apollo包（我没有使用）并且没有解决。
我可以尝试自己声明它，但同样的情况也会发生在body和headers属性（具有BodyInit和HeadersInit类型）上。 …
fetch-api ×10
javascript ×4
typescript ×3
reactjs ×2
ajax ×1
cookies ×1
cors ×1
csrf ×1
django ×1
fetch ×1
firefox ×1
html ×1
http ×1
http-headers ×1
jest ×1
next.js ×1
node.js ×1
preflight ×1
proxy ×1
react-native ×1
swr ×1
unit-testing ×1