189 8069 5689

碰到一个antdesign跨域问题-创新互联

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

项目背景：采用前端模版框架ant design的脚手架antd-admin做开发时，在本地做开发时，发现即使设置成post方法，也会通过get发送请求。逐步查询发现采用的都是JSONP格式请求。而JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

成都创新互联公司长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为崇礼企业提供专业的成都网站建设、成都网站设计，崇礼网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

于是查看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));

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

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。


文章题目：碰到一个antdesign跨域问题-创新互联
网页地址：http://jkwzsj.com/article/dccegj.html

其他资讯