项目背景:采用前端模版框架ant design的脚手架antd-admin做开发时,在本地做开发时,发现即使设置成post方法,也会通过get发送请求。逐步查询发现采用的都是JSONP格式请求。而JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
于是查看util下面的request.js文件,发现代码如下:
export default function request (options) {
if (options.url && options.url.indexOf('//') > -1) {
const origin = `${options.url.split('//')[0]}//${options.url.split('//')[1].split('/')[0]}`
if (window.location.origin !== origin) {
if (CORS && CORS.indexOf(origin) > -1) {
options.fetchType = 'CORS'
} else if (YQL && YQL.indexOf(origin) > -1) {
options.fetchType = 'YQL'
} else {
options.fetchType = 'JSONP'
}
}
}
经测试发现本地都走的JSONP的类型, 在看下面的代码。
if (fetchType === 'JSONP') {
return new Promise((resolve, reject) => {
jsonp(url, {
param: `${qs.stringify(data)}&callback`,
name: `jsonp_${new Date().getTime()}`,
timeout: 4000,
}, (error, result) => {
if (error) {
reject(error)
}
resolve({ statusText: 'OK', status: 200, data: result })
})
})
}
将所有的参数,作为url的参数的后面追加。于是问了一下前端的大神,结合现实情况,总结修改方案如下:
- 前端框架采用json格式请求,对于post的请求先发送method=OPTIONS的请求, 如果返回的是204状态,则放过,然后在发送实际请求。
- 后端api接口曾需要放过method=OPTIONS的请求,并且返回204的状态。
具体解决方案:
(1) 注销上面jsonp直接返回的代码,所有请求都采用json格式。放过204的状态。
return fetch(options).then((response) => {
if (response.status === 204) {
return response.text()
}
... ...
(2) server端放过method=OPTIONS的请求, 返回204。
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header('Access-Control-Allow-Origin: *');
header('Content-Type:application/json; charset=utf-8');
header('Access-Control-Allow-Methods: "GET, POST, OPTIONS, PUT, DELETE"');
header('Access-Control-Allow-Headers: content-type');
header('Access-Control-Max-Age: 1000');
http_response_code('204');
exit;
}
(3) 对于json格式的请求,也要返回相应的头部。
case 'JSON':
// 返回JSON数据格式到客户端 包含状态信息
header('Access-Control-Allow-Origin: *');
header('Content-Type:application/json; charset=utf-8');
header('Access-Control-Allow-Methods: "GET, POST, OPTIONS, PUT, DELETE"');
header('Access-Control-Max-Age: 1000');
exit(json_encode($data));
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。