Ошибка CORS Webpack-dev-server с учетными данными

Question

У меня проблемы с CORS при перезагрузке горячего модуля - сервер dev. Я использую dev-сервер по порту 3000 но приложение обслуживается из другого порта http://localhost:52024/,

Это ошибка, которую я получаю (Chrome, Windows 10):

GET http://localhost:3000//sockjs-node/info?t=1502216500095 404 (Not Found)
XMLHttpRequest cannot load http://localhost:3000//sockjs-node/info?t=1502216500095. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:52024' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
[WDS] Disconnected!

На самом деле я получаю две ошибки: первая вызвана двойной косой чертой // в пути другой является ошибка, связанная с CORS. Это мое webpack.config.js:

const webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry: {
        'admin': ['webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './src/admin/index.js']
    },
    output: {
        path: path.join(__dirname, 'admin/dist'),
        filename: '[name].js',
        publicPath: 'http://localhost:3000'
    },
    module: {
        rules: [
            { test: /\.js$/, include: path.join(__dirname, 'src'), use: ['react-hot-loader/webpack', 'babel-loader'] },
            { test: /\.css/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ['url-loader?limit=10000&mimetype=application/font-woff'] },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ['file-loader'] },
            { test: /\.(png|jpg)$/, use: ['url-loader?limit=8192'] }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        port: 3000,
        hot: true,
        inline: true,
        headers: {
            "Access-Control-Allow-Origin": "*"
        }
    }
};

Я начинаю веб-пакет с:

webpack-dev-server --config webpack.config.js --progress

Любая идея? я использую webpack 3.5.1 а также webpack-dev-server 2.7.1 Спасибо.

Answer 1

Что касается решения проблемы CORS, вы можете выполнить одно из следующих действий:

• В вашем webpack.config.js жёстко http://localhost:52024 как разрешенное происхождение в значение Access-Control-Allow-Origin заголовок ответа:

  headers: {
      "Access-Control-Allow-Origin": "http://localhost:52024"
  }
  

  И затем, конечно, как только вы настроите рабочий сервер / домен для своего приложения, измените это http://localhost:52024 к какому бы ни было происхождение производства.

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

• В качестве альтернативы, в любом другом коде приложения, который вы запускаете на этом сервере разработки веб-пакетов, который обрабатывает ответы на запросы, вам нужно получить значение Origin Заголовок запроса и просто повторить это обратно в Access-Control-Allow-Origin значение заголовка ответа:

  response.setHeader('Access-Control-Allow-Origin', request.headers.origin)
  

  Это будет иметь тот же эффект, что и Access-Control-Allow-Origin: * если браузеру разрешить доступ к ответам любому веб-интерфейсу JavaScript, работающему в любом источнике, он также не позволит браузеру ввести "… не должно быть подстановочным знаком". *когда режим учетных данных запросаincludeОграничение, которое в противном случае могло бы получить удар.

---

Обновление: в любом случае вам также необходимо отправитьAccess-Control-Allow-Credentials заголовок ответа со значением true чтобы браузеры позволяли вашему веб-интерфейсу JavaScript-кода получить доступ к ответу, если учетные данные включены в запрос.

Answer 2

Странно, у меня сейчас была такая же проблема с двумя косыми чертами. Это может быть ошибка Webpack, я не уверен. Удаление output.publicPath сформировать modules.export объект исправил это для меня. Мой был настроен так:

output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, 'dist_dev'),
    publicPath: '/'
},

Вы могли бы использовать <base href="http://localhost:3000/"> в вашем шаблоне HTML вместо output.publicPath вариант. Смотрите этот ответ.

Что касается проблем с CORS, вы можете попытаться добавить заголовки контроля доступа к серверу разработки, как предлагается здесь.