ipad/edge 上没有显示离子图标

Question

我在身份验证服务后面的 nginx 服务器中部署了一个 stenciljs 组件。为了得到任何东西，请求必须包含一个包含 access_token 的 cookie。该组件在 android 设备和 chrome/firfox/IE11/ 桌面设备上没有任何问题。问题出在 Microsoft Edge 和 ipad（任何导航器）上，这是由于浏览器未将 cookie 发送到服务器。有什么提示吗？

header.tsx

import { Component, Prop, State, Element } from '@stencil/core';
@Component({
  tag: 'pm-header',
  styleUrl: 'pm-header.scss',
  shadow: true
})
export class PmHeader {

...

  render() {
    return (
      <nav>
        <ul>
          <li id="menu-icon" class="left menu-icon"
            onClick={() => this.toggleFocus('menu-icon')} >
            <a>
              <ion-icon name="md-apps"></ion-icon>
            </a>
          </li>
          <li id="user-icon" class="right menu-icon"
            onClick={() => this.toggleFocus('user-icon')} >
            <a>
              <ion-icon name="md-contact"></ion-icon>
            </a>
          </li>
        </ul>
      </nav>
    );
  }
}

PS：我正在使用 stencil/core v0.15.2

Answer 1

所以经过一些挖掘后发现问题出在 ionicons 实现上。他们在不发送导致经过身份验证的请求的凭据的情况下获取 svgs。当然，某些导航器（例如 chrome 和 firefox，甚至 IE11）设法发送 cookie，即使没有明确指定它们应该发送。无论如何，为了解决这个问题，我必须在构建后创建一个运行的脚本文件。此脚本将凭据："include" 选项添加到提取调用，以便发送 cookie。

修复图标-script.js

/** 
 * Workaround to fix this ion-icons bug https://github.com/ionic-team/ionicons/issues/640
 * To be removed when this bug is fixed
 */
const fs = require('fs');
const workDir = 'dist/component-dir';

fs.readdir(workDir, function(err, items) {
  if (err) { return console.log(err); }

  for (var i=0; i<items.length; i++) {
    if (items[i].endsWith('.entry.js')) {
      insertString(workDir + '/' + items[i], '"force-cache"', ',credentials:"include"');
    }
  }
});

function insertString(file, searchValue, insertValue){
  fs.readFile(file, 'utf8', function (err, content) {
    if (err) { return console.log(err); }

    let newContent = content.substr(0, content.indexOf(searchValue) + searchValue.length);
    content = content.substr(newContent.length, content.length); 
    newContent += insertValue + content;

    fs.writeFile(file, newContent, function (err) {
      if (err) { return console.log(err); }
      console.log('Successfully rewrote ' + file);
    });
  });
}

ipad/edge 上没有显示离子图标

ion icons not showing up on ipad / edge

ipad

microsoft-edge

stenciljs

ionicons