Невозможно получить доступ к файлам шрифтов, упомянутым внутри @ font-face - PullRequest
Новая
       20

Невозможно получить доступ к файлам шрифтов, упомянутым внутри @ font-face

1 голос
/ 11 июля 2019

Во-первых, я новичок в вебпаке и его загрузчике.У меня есть приложение, в котором я создаю файл CSS, который находится в другом домене, из которого исходит запрос (больше похоже на статическое хранилище кода).Проблема в том, что сервер загружает файл style.css, и он импортирует шрифты, которые также хранятся в том же хранилище и доступны как: 

@font-face {
    font-family: someFont;
    src: url(/0.0.1/fonts/f9c391f982c59a955bb0e1866fbbed4a.woff2) format("woff2"),url(/0.0.1/fonts/ac4b1e27ea3661e299554aaa429e97c5.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display:swap}

Итак, теперь давайте предположим, что это внутри *Файл 1004 * и на домене https://example.com

Этот style.less загружается отлично, так как я знал о проблеме CORS и добавил cors () в моем приложении node / Express, например 

cont cors = require('cors');
app.use(cors());

Теперь дело в том, что временные файлы styles.css пытаются загрузить шрифты внутри. Я начинаю получать ошибку CORS.когда я проверяю заголовок Все остальные запросы, идущие в этот репозиторий, имеют access-control-allow-origin: '*' в заголовке ответа, но не запрос шрифта

. Вот конфигурация веб-пакета для загрузчиков и путь: 

output: {
        path: path.resolve(__dirname, `dist/client/${pkg.version}`),
        publicPath: `/${pkg.version}/`
    },

    devtool: ifProduction('nosources-source-map', 'source-map'),
module: {
        rules: [
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(ttf|eot|svg?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=fonts/[name].[ext]'
            },
            {
                test: /\.(png|jpg|ico|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader'
            }
        ]
    },

Может ли кто-нибудь помочь мне с тем, что может быть не так в этом?

1 Ответ

0 голосов
/ 11 июля 2019

Попробуйте обернуть url строки в font-face определениях в кавычки.Как ниже. 

// Note the quotation marks

src: url("/0.0.1/fonts/f9c391f982c59a955bb0e1866fbbed4a.woff2") format("woff2"),
     url("/0.0.1/fonts/ac4b1e27ea3661e299554aaa429e97c5.woff") format("woff");
...