<style> 中的字符转换为 unicode HTML 跨域请求中的实体

Question

我有一个使用 react-jss 的 NextJS 应用程序。

在我的 CSS 中，我的规则是针对 '& .working[style="display: block;"] ': {...}

我可以构建，运行，当我在服务器运行ning 所在的同一域上访问该页面时，我看到它工作正常，我有许多个人 <style> 看起来像的标签：

<style data-jss="" data-meta="Themed">...</style>
<style data-jss="" data-meta="Themed">...</style>
...

但是，当我访问从另一个域提供的同一页面时，（或使用 Postman）我看到有问题的规则已将 " 字符替换为 "，因此它看起来像 .working[style="display: block;"]（这不限于 " - 该规则后面的 > 被替换为 >）。这些样式也都在一个 <style> 标签下提供：

<style id="server-side-styles">...</styles>

该应用程序没有做任何花哨的事情，样式已添加到 _document.js 中，如下所示：https://github.com/vercel/next.js/blob/canary/examples/with-react-jss/pages/_document.js

我不认为这是 NextJS 或 react-jss 的问题，因为当我检查服务器上的字符串化注册表时（当通过 Postman 发出请求时）我仍然看到它最初编写的样式，没有字符转换。

是否有与 CORS 或跨源请求相关的内容会导致 " 以这种方式被 " 替换？如果是，我该如何防止这种情况发生？如果不是，我是不是遗漏了什么明显的东西？

Answer 1

使用您 link 编辑的示例，在这一行：

<style id="server-side-styles">{registry.toString()}</style>

您需要使用 React 的 dangerouslySetInnerHTML 约定，否则返回的字符串将被转义，就像您看到的那样。

根据示例 link，_document.js 看起来像：

import Document from 'next/document'
import { SheetsRegistry, JssProvider, createGenerateId } from 'react-jss'

export default class JssDocument extends Document {
  static async getInitialProps(ctx) {
    const registry = new SheetsRegistry()
    const generateId = createGenerateId()
    const originalRenderPage = ctx.renderPage
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => (
          <JssProvider registry={registry} generateId={generateId}>
            <App {...props} />
          </JssProvider>
        ),
      })

    const initialProps = await Document.getInitialProps(ctx)
    const rawStyles = {
      __html: registry.toString(),
    }

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style id="server-side-styles" dangerouslySetInnerHTML={rawStyles} />
        </>
      ),
    }
  }
}

<style> 中的字符转换为 unicode HTML 跨域请求中的实体

Characters in <style> converted to unicode HTML Entity in cross-origin requests

html

reactjs

cross-domain

next.js

css-in-js