window.open 以POST方式请求


function openPostWindow(url, name, applyNo, dptCde, height, width, top, left) {
var postForm = document.createElement("form");
postForm.id="postForm";
postForm.method="post";
postForm.action=url;
postForm.target=name;

// 申请单号列
var applyNoInput = document.createElement("input");
applyNoInput.type="hidden";
applyNoInput.name= "applyNo";
applyNoInput.value= applyNo;
postForm.appendChild(applyNoInput);

// 机构编码
var dptCdeInput = document.createElement("input");
dptCdeInput.type="hidden";
dptCdeInput.name= "dptCde";
dptCdeInput.value= dptCde;
postForm.appendChild(dptCdeInput);

postForm.attachEvent("onsubmit",function(){ openWindow(name, height, width, top, left); });
document.body.appendChild(postForm);

postForm.fireEvent("onsubmit");
postForm.submit();
document.body.removeChild(postForm);
}

function openWindow(name, height, width, top, left) {
window.open('about:blank',name,'height='+ height +',width='+ width +',top='+ top +',left='+ left +',toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=no,depended=yes');
}
<think>嗯,用户的问题是关于在JavaScript中使用window.open()时如何携带自定义请求头。我之前看过一些相关的引用资料,现在需要整理一下思路。 首先,根据引用[1],使用iframe、window.open或者a标签打开新页面时,无法直接设置请求头,所以需要其他方法。引用[2]提到用window.open直接请求后台接口,但可能没有处理请求头。引用[3]中的例子使用axios发送带有自定义头的请求,获取数据后通过URL.createObjectURL打开新窗口,这可能是一个解决方案。 那用户的需求是携带自定义headers,而直接使用window.open无法做到,因为浏览器的安全限制不允许修改请求头。所以需要间接的方法,比如先通过AJAX或fetch发送带有自定义头的请求,获取数据后再用window.open展示。 例如,引用[3]中的代码用axios获取PDF文件,设置responseType为blob,然后生成URL并用window.open打开。这可能适用于需要预览文件的情况。如果是其他类型的数据,可能需要不同的处理方式,比如创建隐藏表单或者使用post请求,但表单只能设置Content-Type,不能自定义其他头。 另外,服务端配合可能也是一个方向,比如在URL中添加token参数,但这可能不如请求头安全。需要权衡安全性和实现难度。 总结下来,可行的方案包括使用AJAX/fetch预先获取数据并处理,或者让服务端支持通过URL参数传递必要的信息。需要根据具体情况选择合适的方法,并注意跨域问题和浏览器安全策略的限制。</think>在使用JavaScript的`window.open()`时,浏览器出于安全考虑**不允许直接添加自定义请求头**,但可以通过以下两种方法间接实现类似效果: --- ### 方法一:通过AJAX预先携带请求头获取数据 1. **使用`fetch`或`axios`发送带有自定义头的请求** 通过异步请求获取数据后,将结果转为Blob对象并生成临时URL: ```javascript // 示例:获取PDF文件并预览 fetch('https://api.example.com/data', { method: 'GET', headers: { 'Authorization': 'Bearer your_token', 'Custom-Header': 'value' } }) .then(response => response.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); window.open(url, '_blank'); // 新窗口展示内容 window.URL.revokeObjectURL(url); // 释放内存 }); ``` 此方法适用于**文件预览或数据展示**场景[^3]。 2. **限制** - 需要处理跨域问题(服务端需配置CORS); - 仅适用于GET请求,且无法直接控制新窗口的URL显示。 --- ### 方法二:通过URL参数传递关键信息 1. **将Token或标识拼接在URL中** 如果自定义头用于身份验证(如Token),可将其作为URL参数传递: ```javascript window.open(`https://api.example.com/data?token=${your_token}`); ``` 服务端需接收并处理该参数[^2]。 2. **限制** - URL参数可能被浏览器历史记录或日志记录,存在安全风险; - 无法传递敏感信息(建议配合HTTPS使用)。 --- ### 替代方案:使用隐藏表单(仅限POST请求) ```javascript // 动态创建表单并提交 const form = document.createElement('form'); form.method = 'POST'; form.action = 'https://api.example.com/data'; form.target = '_blank'; // 新窗口打开 const tokenInput = document.createElement('input'); tokenInput.type = 'hidden'; tokenInput.name = 'token'; tokenInput.value = 'your_token'; form.appendChild(tokenInput); document.body.appendChild(form); form.submit(); document.body.removeChild(form); ``` 此方法支持POST请求,但**无法设置任意请求头**,只能通过表单字段传递数据。 --- ### 总结 | 方法 | 适用场景 | 安全性 | 灵活性 | |--------------------|----------------------------|--------|----------------| | AJAX + Blob | 文件预览、数据展示 | 高 | 高(需CORS) | | URL参数 | 简单身份验证、非敏感数据 | 中 | 低 | | 隐藏表单 | POST请求传递数据 | 中 | 中 | **推荐优先使用AJAX+Blob方案**,并在服务端配置CORS响应头(如`Access-Control-Allow-Headers`)以支持自定义头[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值