Персонажи converted to unicode HTML Entity in cross-origin requests

#html #reactjs #cross-domain #next.js #css-in-js

#HTML #reactjs #междоменный #next.js #css-in-js

Вопрос:

У меня есть приложение NextJS, которое использует react-jss.

В моем CSS у меня есть правило, которое нацелено 'amp; .working[style="display: block;"] ': {...}

Я могу создавать, запускать и видеть, что это работает нормально, когда я захожу на страницу в том же домене, на котором работает сервер, и у меня есть несколько отдельных <style> тегов, которые выглядят как:

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

Однако, когда я получаю доступ к той же странице, которая обслуживается из другого домена (или с помощью Postman) Я вижу, что в рассматриваемом правиле " символ был заменен на amp;quot; , чтобы он выглядел так .working[style=amp;quot;display: block;amp;quot;] (это не ограничивается " — > позже в этом правиле заменяется на amp;> ). Все стили также подаются под одним <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 или запросами с перекрестным происхождением, которые могут привести " к замене amp;quot; таким образом? Если да, как я могу это предотвратить? Если нет, я упускаю что-то очевидное?

1. @sideshowbarker обдумывая ваше удаление тега cors, я предполагаю, что это связано с тем, что эта проблема также встречается с Postman? Это было не то, что я рассматривал, и, поскольку я явно спрашивал, может ли это быть связано с CORS , по крайней мере, комментарий к этому влиянию был бы полезен. Определенно что-то очевидное, что я пропустил…

2. В общем, учитывая конкретную проблему, способ узнать, связано ли это с CORS, — это заглянуть в консоль devtools и посмотреть, зарегистрировал ли браузер какие-либо сообщения, в которых явно упоминается CORS. Если браузер не зарегистрировал никаких сообщений в консоли, в которых явно упоминается CORS. И что касается конкретной проблемы, описанной в вопросе, ни в протоколе CORS, ни в поведении браузера, связанном с CORS, нет ничего, что могло бы вызвать поведение, описанное в вопросе.

Ответ №1:

Используя пример, который вы связали, в этой строке:

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

вам нужно использовать dangerouslySetInnerHTML соглашение React, иначе возвращаемая там строка будет экранирована, как вы видите.

Согласно ссылке примера, это _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} />
        </>
      ),
    }
  }
}