碰到一個(gè)ant design跨域問題

今天碰到了一個(gè)跨域問題，折騰了半天，終于解決了。

項(xiàng)目背景：采用前端模版框架ant design的腳手架antd-admin做開發(fā)時(shí)，在本地做開發(fā)時(shí)，發(fā)現(xiàn)即使設(shè)置成post方法，也會(huì)通過get發(fā)送請(qǐng)求。逐步查詢發(fā)現(xiàn)采用的都是JSONP格式請(qǐng)求。而JSONP的缺點(diǎn)則是：它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁面之間如何進(jìn)行JavaScript調(diào)用的問題。

于是查看util下面的request.js文件，發(fā)現(xiàn)代碼如下：

  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'
        }
      }
    }

經(jīng)測(cè)試發(fā)現(xiàn)本地都走的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 })
      })
    })
  } 

將所有的參數(shù)，作為url的參數(shù)的后面追加。于是問了一下前端的大神，結(jié)合現(xiàn)實(shí)情況，總結(jié)修改方案如下：

• 前端框架采用json格式請(qǐng)求，對(duì)于post的請(qǐng)求先發(fā)送method=OPTIONS的請(qǐng)求， 如果返回的是204狀態(tài)，則放過，然后在發(fā)送實(shí)際請(qǐng)求。
• 后端api接口曾需要放過method=OPTIONS的請(qǐng)求，并且返回204的狀態(tài)。

具體解決方案：
(1) 注銷上面jsonp直接返回的代碼，所有請(qǐng)求都采用json格式。放過204的狀態(tài)。

    return fetch(options).then((response) => {
        if (response.status === 204) {
            return response.text()
        }
        ... ...

(2) server端放過method=OPTIONS的請(qǐng)求, 返回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) 對(duì)于json格式的請(qǐng)求，也要返回相應(yīng)的頭部。

case 'JSON':
    // 返回JSON數(shù)據(jù)格式到客戶端 包含狀態(tài)信息
    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));

因?yàn)閮?nèi)部系統(tǒng)初期開發(fā)，暫時(shí)沒有細(xì)節(jié)優(yōu)化。僅實(shí)現(xiàn)功能，解決問題為主。