温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

碰到一个ant design跨域问题

发布时间:2020-07-10 01:01:21 来源:网络 阅读:12449 作者:netbird_fly 栏目:开发技术

今天碰到了一个跨域问题,折腾了半天,终于解决了。


项目背景:采用前端模版框架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));

因为内部系统初期开发,暂时没有细节优化。仅实现功能,解决问题为主。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI