如何在ReactJS中通过fetch()发送带有POST请求的formData时重定向到外部URL？
在ReactJS中，可以使用fetch()函数发送带有POST请求的formData，并且可以通过重定向到外部URL来实现。下面是一个示例代码：
const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
fetch('https://example.com/external-url', {
method: 'POST',
body: formData,
redirect: 'follow' // 设置重定向选项为follow
})
.then(response => {
if (response.redirected) {
window.location.href = response.url; // 重定向到外部URL
}
})
.catch(error => {
console.error('Error:', error);
});在上面的代码中，首先创建一个FormData对象，并添加需要发送的数据。然后使用fetch()函数发送POST请求，将FormData对象作为请求的body参数传递。同时，设置重定向选项为'follow'，以便在服务器返回重定向响应时自动进行重定向。
在fetch()的响应处理中，可以通过检查response对象的redirected属性来判断是否发生了重定向。如果发生了重定向，可以通过window.location.href将页面重定向到response.url指定的外部URL。
需要注意的是，由于安全策略的限制，浏览器可能会阻止跨域的重定向。因此，确保重定向的目标URL与当前页面的域名是相同的，或者在目标URL的服务器端进行适当的配置以允许跨域重定向。
推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云对象存储（https://cloud.tencent.com/product/cos）可以用于支持ReactJS应用程序的部署和存储需求。
相关·内容
1回答
如何在ReactJS中通过fetch()发送带有POST请求的formData时重定向到外部URL？
reactjs、redirect、http-post、fetch、payment-processing
我想通过POST请求将一些表单字段发送到外部API。我尝试在React中使用带有action和method属性的HTML表单标签。提交此表单可以正常工作。但是，当我使用fetch()来发布相同的内容时，它不会重定向到外部url。我只得到一个状态为200的响应，然后重定向为false。当我手动尝试使用window.location.href = url重定向时，它会重定向，但不会向API提供表单域。如何在React中使用fetch()发布字段和重定向？
const formData = new FormData();
formData.append("MID", mId);
浏览 30提问于2020-05-04得票数 0
2回答
如何在使用fetch和await时将用户重定向到不同的页面？
javascript、ecmascript-6、fetch
在使用fetch和await对我的site api进行POST调用后，我一直在尝试将用户重定向到不同的页面。我收到一个响应，上面写着GET localhost:10004/ page。通常在$.ajax或xmlHTTPRequest中，它会自动重定向，但当使用新的fetch和await语法时，它无法自动重定向。 这是我的代码。 我已经尝试过使用redirect = "follow“，在那之后它不会重定向。 fetch('http://localhost:10004/api', {
method: 'POST', // or &#
浏览 17提问于2018-12-27得票数 3
2回答
如何在API调用期间使代码在JavaScript中变干
javascript、fetch
因此，我在js文件中调用5个API，除了我传递的URL和表单数据之外，所有这些代码都是相同的。相同的代码行重复5次，我认为这不是写的好处。我想要的是让这段代码变干，但不知道我应该做什么改变
var formdata = new FormData();
formdata.append("market", "KSE100");
var requestOptions = {
method: "POST",
body: formdata,
redir
浏览 7提问于2022-04-14得票数 0
回答已采纳
1回答
使用POST重定向将FormData对象作为表单提交
javascript、post、form-data
我使用一个FormData对象(所以没有真正的超文本标记语言表单)在JS中创建一个表单，我想用POST方法将它提交给另一个重定向的URL (就像我编译一个表单并按下submit按钮，重定向到action URL一样)。
我试过使用下面的代码：
function sendFileToDetailsStep(fileToUpload) {
var formData = new FormData();
formData.append("file", fileToUpload);
formData.append(&
浏览 33提问于2021-02-13得票数 0
1回答
在reactjs中向API发送formData
javascript、reactjs、form-data
我使用将HTML转换成图像。
因此，每当用户提交表单时，我都会尝试使用formData将图像作为blob和其他细节发送到API。
我将formData发送到API以处理提交的数据。
当用户点击提交按钮时，下面的代码将负责。
function handleReport(target = 'body') {
html2canvas(document.querySelector(target))
.then((canvas) => {
let pngUrl = canvas.toDataURL(); // PNG is the default
浏览 5提问于2021-12-27得票数 1
回答已采纳
1回答
我正在尝试将一个文档附加到我的节点。我在React中有以下代码。 const url = `http://localhost:10015/upload/attachment`;
const formData = new FormData();
formData.append('file',file); // from file select
let result = await fetch(url, {
method: 'post',
body: formData
}); 当我查看网络日志时，它看起来没有问题 ? 并且响应是附件的散列。 当我查看日
浏览 13提问于2019-01-08得票数 3
1回答
将React组件中的获取“POST”链接起来
javascript、reactjs
我相信我的问题可能或多或少得到了答案，但我找不到令人满意的答案。我有一个带有输入的React表单，onChange允许您选择一张立即保存在云中的图片。云返回一个带有url和id的响应，我希望将它们传递给后端数据库，从而与表单handleFormSubmit一起提交。下面的代码只有等到从云返回响应时才会成功(我查看了Dev工具组件)。如果我要快速，url是‘未定义’，因为承诺没有设定。我如何以编程的方式正确地连锁这些承诺？
我使用状态'photoUrl‘作为url和一个名为'Event’的对象。
处理文件输入onChange并发送到云并获得响应：
async function h
浏览 0提问于2020-07-19得票数 0
回答已采纳
2回答
React图像上传不能通过fetch工作
reactjs、api
const submitData = (ev) => {
ev.preventDefault();
let formData = new FormData();
formData.append("topicName", topicName);
formData.append("topicMessage", topicMessage);
formData.append("pictures", pictures);
const reques
浏览 9提问于2021-06-05得票数 0
3回答
仅在Android上用FormData网络错误响应本机(与世博)获取
android、react-native、fetch、expo、form-data
当我试图使用fetch和FormData在POST中使用React本机(expo 37)进行一个获取API调用时，所有的东西在IOS上都能很好地工作，但是它在Android：[TypeError: Network request failed]上产生了一个网络错误。如果我使用axios而不是fetch，我也有相同的错误(网络错误)。
如果我用空的a {}替换formData，它就能工作。我已经检查了模拟器和物理设备(不同的Android版本)，我试着玩标题，但没有结果。我的API有一个valide让我们加密证书
let url = 'https://my-prod-server/web
浏览 7提问于2020-04-02得票数 3
1回答
从FormData中删除"filename“头
javascript、node.js、fetch、multipartform-data、codeceptjs
我尝试使用FormData()发布请求，我需要包括"content type“头，所以我使用blob将条目附加到我的表单中，但这会自动将文件名设置为"blob”
const formData = new FormData();
const obj1 = new Blob([json_data], {type: 'text/plain; encoding=utf-8'});
formData.append("small_config", obj1);
const obj2 = new Blob([
浏览 16提问于2021-11-22得票数 1
2回答
上传单文件mongoDb
reactjs、mongodb
当我进行多次上传时，它工作得很好，但是当我上传单个文件时，它就不工作了。它说TypeError: req.body.file.map不是一个函数
我不知道这里发生了什么。是因为我已经绘制了req.body地图吗？
exports.create = (req, res) => {
const { name, description, price, category, quantity, url } = req.body
if (!name || !description || !price || !category || !quantity ) {
浏览 2提问于2022-03-28得票数 0
回答已采纳
2回答
如何在MediaWiki中使用javascript检测重定向
javascript、mediawiki、fetch-api
我想检测MediaWiki中的URL是否指向重定向。当我在en.wikipedia.org上运行以下脚本时： let test = await fetch('https://en.wikipedia.org/wiki/Bruce_Wayne');
console.log(test.url); // → https://en.wikipedia.org/wiki/Bruce_Wayne
console.log(test.redirected); // → false 然而，当我在地址栏中输入https://en.wikipedia.org/wiki/Bruce_W
浏览 9提问于2020-10-01得票数 1
回答已采纳
2回答
如何使用ajax将文件上载到asp.net mvc控制器操作
c#、jquery、ajax、asp.net-mvc-3
我有这个提交代码，
$('#form').on('submit',function (e) {
e.preventDefault();
//var file = $("#productImg");
var fileUpload = $("#productImg").get(0);
var files = fileUpload.files;
var form = $("#form");
var formData = new FormData();
formD
浏览 3提问于2016-08-01得票数 3
回答已采纳
1回答
ReactJS Fetch POST导致不需要的刷新
javascript、reactjs、post、fetch
我已经创建了一个react应用程序，可以在表单中获取图片文件和其他一些输入，并使用fetch "post“将它们发送到API。一切都很好，api完成了它的工作并返回正确的响应，如alert函数所示。但是，获取完成后，页面会立即自动刷新。我想在fetch之后重定向到另一个带有响应数据的页面，但由于这个问题，它返回到表单页面。下面是我的代码： export default function Miyuki() {
const { register, handleSubmit } = useForm()
const onSubmit = async (data) =>
浏览 55提问于2021-07-05得票数 1
回答已采纳
1回答
Keycloak返回CORS访问-控制-允许-原产地错误
javascript、vue.js、cors、keycloak、keycloak-services
我可以使用keycloak-js客户端登录到Keycloak，但是，在发出fetch请求时，我会得到以下错误：
Access to fetch at 'https://xxxxxxxx.com/auth/realms/app_testing/protocol/openid-connect/token' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on t
浏览 6提问于2021-02-09得票数 3
回答已采纳
1回答
将formData的值重新赋值给一个变量将返回后端中的空对象
javascript、reactjs、axios
我使用formData和axios在我的反应前端应用程序，以适应图像字段。因此，我发送给后台Django rest应用程序的数据是空的。
前端axios请求
const addPost = (userInput, redirectTo) => dispatch => {
const input = [];
input[0] = userInput[0];
input[1] = userInput[1];
const postInput = userInput[2];
const formData = new FormData();
浏览 1提问于2022-01-11得票数 0
2回答
使用Ajax将FileList发送到PHP脚本
javascript、php、jquery、ajax
我试图使用JS发送数组文件。我的代码：
var formData = new FormData();
formData.append("files", files);
$.ajax({
url: './upload.php',
method: 'post',
data: formData,
processData: false,
contentType: false,
success: function(response) {
alert('Files uploaded successfull
浏览 1提问于2017-05-20得票数 1
回答已采纳
1回答
当FormData不可用时，如何将POST请求作为表单数据发送？(Airtable脚本)
javascript、multipartform-data、form-data、cloudinary、airtable
Cloudinary需要使用multipart/form-data发送数据，但我的工作环境是FormData 。
那么，我怎么能做这么简单的事情呢？
const formData = new FormData();
formData.append('file', assetUrl);
formData.append('upload_preset', CLOUDINARY_UNSIGNED_UPLOAD_PRESET);
formData.append('cloud_name', CLOUDINARY_CLOUD_NAME);
浏览 4提问于2022-11-09得票数 0
回答已采纳
1回答
用FormData对象获取请求
javascript、php、jquery、xmlhttprequest、fetch-api
我试图使用fetch请求在FormData对象的附件中发送html表。这些代码是正确的
let formData = new FormData();
formData.append('sponsor', "My sponsor");
formData.append('rider', "xRider");
但是，当试图在其中发送html时，获取请求将失败。
formData.append('delegation', "<b>Bold Text</b>");
我的全部要求
fet
浏览 4提问于2022-07-24得票数 0
1回答
POST期间控制台中的FormData()对象为空
javascript、fetch、form-data
这个问题以前被问过，但我在另一个问题中找不到答案。当我记录我的formdata时，我得到了{}我正在使用fetch从我的客户端html发送两个项目，一个是文本文件和一个图像文件
我的表单
<form id="addform">
<div class="form-group">
<label for="exampleInputPassword1">post</label>
<input type="text" class="
浏览 28提问于2020-05-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
