1

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

头文件.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：我正在使用模板/核心 v0.15.2

4

1 回答 1

1

因此，经过一番挖掘，事实证明问题出在离子子的实施上。他们在不发送导致经过身份验证的请求的凭据的情况下获取 svg。当然，一些导航器，如 chrome 和 firefox，甚至 IE11 都设法发送 cookie，即使没有明确指定它们应该发送。无论如何，为了解决这个问题，我必须创建一个在构建之后运行的脚本文件。该脚本在 fetch 调用中添加了 credentials: "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);
    });
  });
}
于 2018-11-23T15:47:53.413 回答