• Почему при отправке формы с помощью axios - не видно работы защитника csrf (Laravel)?

    Дмитрий Кузнецов, csrf токены нужны в рамках сессии, если вы хотите предоставлять что-то вроде api сервиса и иметь к нему доступ с разных адресов/устройств, стоит отказаться от сессионной авторизации и рассмотреть другие способы авторизации клиента, например, авторизация посредством подписанных токенов, это когда мы выполняем запрос на авторизацию (передаем логин, пароль, естественно по ssl) в ответ получаем токен подписанный нашим backend сервером и содержащим в себе некую информацию в виде ключа, с которым дальше работаем (либо устанавливаем постоянное соединение и единожды передаем его, либо постоянно передаем его в запросе), при таких условиях csrf токен не нужен и этот способ более гибкий, мы можем выписывать множество токенов доступа, выдавать привилегии на токен и в любой момент ограничить доступ. То, что я написал поддерживает Laravel passport вам нужно лишь авторизовать клиента, выдав ему токен доступа, после чего взаимодействовать с клиентом доверяя этому токену, и возможно еще придется дописать csrfMiddleware чтобы тот пропускал запросы с вашим подписанным токеном, на следующий шаг.

    semki096, зашифрованный csrf токен так же пишется в куки и если не передать токен формой или заголовком, лара пробует вытянуть X-XSRF-TOKEN и расшифровать, если все не в точку, то смотри свой код, ничем не могу помочь, возможно твоя проблема в твоем csrf мидлваре, возможно он пропускает XMLHttpRequest запросы без проверки csrf токена.
  • Почему при отправке формы с помощью axios - не видно работы защитника csrf (Laravel)?

    https://github.com/laravel/framework/blob/5.5/src/...

    Метод getTokenFromRequest получает csrfToken из переданной формы или из заголовка.
    Метод tokensMatch сверяет полученный токен с тем, что привязан к сессии.
    Если проверка не проходит, бросается TokenMismatchException.

    Здесь https://github.com/laravel/framework/blob/1af9ec33...
    отлавливается и отдается ответ с ошибкой 419 по шаблону https://github.com/laravel/framework/blob/bd352a0d...
  • Почему при отправке формы с помощью axios - не видно работы защитника csrf (Laravel)?

    JhaoDa, тоже заметил это, ну ладно так уж и быть ответим, если пользователь не может сам посмотреть какие данные отправляются =)
  • Полноценный пример SSR для react/redux?

    cester,
    Нужен готовый html под сео задачи:
    запрос страницы /page/1 => собираем глобальный стейт, передаем обработчику запроса => запросы в бд, рендерим html => отдаем клиенту

    Не нужен готовый html:
    запрос страницы /user/admin => собираем глобальный стейт => отдаем html слой, клиент сайд подтягивает, рендерит
  • Полноценный пример SSR для react/redux?

    cester, Только там, где сеошники заставляют, иногда хватает частичного покрытия главной и контент страниц.
  • Как узнать какие товары входят в ценник, если известна итоговая сумма?

    t-alexashka, чем больше товаров нам нужно будет подобрать (и сколько у нас их всего), тем больше у нас будет возможных комбинаций, перебирай их пока не совпадет итоговая сумма, слишком трудоемкая задача для тестового задания или я не вник ._.
  • Как узнать какие товары входят в ценник, если известна итоговая сумма?

    Определять по итоговой сумме какие возможно могут подойти товары это бред. Сделать можно, но практический толк нулевой, потому что, то что получится у нас не факт что это же получилось и у пользователя, потому что бывают товары и с одинаковой ценой. Или я не правильно понял вопрос.
  • Как понять параметры атрибута sizes для атрибута srcset?

    Алексей selftrips.ru, иначе, фоллбек-дефолт, стандартно картинка шириной в 300px, если правильно задать srcset браузер под это правило подберет подходящее изображение
  • Как понять параметры атрибута sizes для атрибута srcset?

    если ширина экрана меньше, либо равна 300px растянуть изображение на 100% относительно блока,
    если правильно задать srcset браузер под это правило подберет подходящее изображение
  • Как понять параметры атрибута sizes для атрибута srcset?

    max-width: 300px ширина экрана
    100vw ширина картинки относительно области просмотра в процентах
  • Как преобразовать этот формат даты?

    cmonguys, ну не писать же нам готовый код для ответа на этот вопрос, поэтому,
    летим в github набираем что-то вроде format date в поисковую строку, выбираем, смотрим код.
    Вот например https://github.com/taylorhakes/fecha 2.1kb
  • Как преобразовать этот формат даты?

    cmonguys, там написано сколько весит, я просто вырезал с проекта jQuery и могу смело заполнять это освободившееся пространство ;) Если важен вес, дерни только нужную функцию
  • Полноценный пример SSR для react/redux?

    cester, я уже запутался в чем ваши вопросы, в ssr или апи или не знаю (слишком много вопросов разных тем),
    клиент открывает страницу, идет запрос серверу, обрабатываем:
    import { createStore } from 'redux'
    import reducers from '../../app/store/reducers';
    import * as dispatchTypes from '../../app/store/dispatchTypes';
    import App from '../app/components/App.jsx';
    
    app.get('/home', (req, res) => {
    	// делаем редакс стор
    	const Store = createStore(reducers, {});
    
    	// вкидываем в него что хотим (нужно)
    	Store.dispatch({
    		type : "USER",
    		payload : req.user
    	})
    
    	// получаем все данные из бд или откуда хотим
    	var ContextData ={
    		page : {
    			title : 'Qwerty'
    		}
    	}
    
    	// рендерим
    	var template = ReactDOMServer.renderToString(
    	  <Provider store={Store}>
    	    <StaticRouter
    	      location={req.url}
    	      context={ContextData}>
    	      <App/>
    	    </StaticRouter>
    	  </Provider>
    	);
    
    	// отдаем шаблонизатору
    	return res.render('content', {
    		preloadState : Store.getState(),
    		content : template
    	});
    });

    Все, клиент получил html готового компонента, клиет-js (аля реакт) подхватит этот html код, параметры окружения, которые мы передали с помощью редакса и продолжит работу.
  • Вопрос от новичка по React?

    davidnum95, Это становится более сложным при поддержке больших приложений, по этому я советую сначала нормально понять возможность и ограничения локального стейта, а потом уже глобального, поскольку в больших приложениях возникает множество зависимостей, которые динамически вытягиваются и за которыми так же нужно следить, вычищая из памяти когда они уже ненужны. Скажем 70% того, что я писал на этой связке я вообще мог обойтись без редакса, но ставил его потому, что удобно.
  • Полноценный пример SSR для react/redux?

    cester, redux отлично подойдет чтобы расшарить данные с сервера клиенту, в компоненте их подхватить.
  • Почему компонент съедает div элемент, React?

    xster, т.е сервер отдает правильно, а потом пропадает? проблема в js со стороны клиента, передаете не все данные или еще чего, из-за этого состояния разные и клиент рендерит заново.
  • Полноценный пример SSR для react/redux?

    cester, для сервера window не определена.

    const composeEnhancers =
      typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
          // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
        }) : compose;
  • Полноценный пример SSR для react/redux?

    Все равно не понял как связаны серверные обработчики и редакс-дев, ладно.
    Запускаешь серв, открываешь главную, на которой у тебя уже html разметка (это если ты таки допилил ssr) и подрубленный бандл клиент скриптов. Скрипты и стили билдятся в два разных файла, css и js :) Это в настройки вебпака. Как это запустить на проде? Как-то так, если побыстрому:

    git clone url folder
    cd folder
    npm install
    // правим конфиги, накатываем левый софт
    npm run build // собираем prod версию css/js (минификация все дела, феншуй)
    pm2 start process.config.js // запустили

    Про process.config.js подробнее можно глянуть на их сайте, на минималочка выглядит вот так:
    module.exports = {
    	apps : [
    		{
    			name: "feat",
    			script: "./server/start.js",
    			interpreter : "babel-node",
    			instance_var : "INSTANCE_ID",
    			env : {
    				"NODE_ENV" : "production",
    				"PORT" : 8000
    			}
    		}
    	]
    }


    Окей, нода поднята и слушает 8000 порт. Осталось развернуть nginx и дело в шляпе.

    Как это обновлять на проде? На свой страх и риск, но минималочка такая, пилишь обновы, вешаешь теги, на проде:
    git fetch --tags
    git checkout v1.2222.043.beta
    npm run build // пересобираешь клиент скрипты
    pm2 restart feat


    Как с этим освоишься, можешь покурить что посложнее ;)
  • Полноценный пример SSR для react/redux?

    cester, как-то вы усложняете)
    Клиент запрашивает страницу, мы её рендерим и отдаем, все, дальше загружаются наши клиент скрипты и работают на уровне запрос-ответ клиент-сервер апи.

    1. Сервер не имеет переменной window, которую даёт нам браузер, соответственно на жизненных циклах реакт-компонента мы не должны её использовать, чтобы работал сервер-сайд рендер.
    2. Зачем?
    3. Да это первичный рендер, как гость/пользователь впервые открывает сайт, летит запрос, мы рендерим и отдаем, соответсвенно запрашиваем страницу из бд (это обработчик на уровне сервера)
    4. Клиент никуда не запускается, клиент скрипты это набор функций/методов, уровня запрос-ответ и обработка/вывод полученной информации, в дальнейшем чтобы что-то добавить (новость например) мы выполняем запрос к серверу, передаем параметры, сервер добавляет, возвращает результат, обновляем компонент.
  • Полноценный пример SSR для react/redux?

    cester, Привет,
    1. Для сервера webpack сборка то и ненужна, только для клиента, пишем правила сборки дев и прод версии (клиента), для тестов достаточно запускать приложение (сервер) и запустить клиент скрипты в режиме --watch веб-пака и можно работать. Клиент компоненты реакта не должны на этапе рендера использовать те переменные, которые выдает браузер но не выдает сервер. Т.е использовать их в методах цикла, которые сервер не трогает, или писать то-то такое typeof window !== 'undefined'
    2. Ну я например не использую веб-пак дев сервер

    Вот мои параметры запуска для разработки:
    npm run dev
    "dev": "cross-env NODE_ENV=development babel-node server/start.js",


    npm run watch
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config ./app/webpack.config.js",


    В конфиге веб-пака babel-loader.

    ----
    Вот пример как на сервере собирается глобальное состояние.
    Поступает запрос, он прошел через базовые мидлвары и добрался до сборки состояния:
    import { createStore } from 'redux'
    import reducers from '../../app/store/reducers';
    import * as dispatchTypes from '../../app/store/dispatchTypes';
    
    export default (req, res, next) => {
    	req._reduxStore = createStore(reducers, {});
    
    	req._reduxStore.dispatch({
    		type : dispatchTypes.APP_URL,
    		payload : config.get("app.url")
    	})
    
    	req._reduxStore.dispatch({
    		type : dispatchTypes.USERS_RECEIVE_UR,
    		payload : req.user // пример
    	})
    
    	return next();
    }


    Запрос проходит дальше и попадает в обработку маршрута:
    import { Page } from '../database/models';
    import ReactSSRender from '../utils/reactSSrender';
    
    const show = (req, res, next) => {
    
    	Page.find(1)
    		.then(page => {
    			// отдаем на рендер шаблонизатору
    			res.status(200).render('content', {
    				preloadState : req._reduxStore.getState(),
    				content : ReactSSRender(req._reduxStore, req.url, {
    					// context
    					page
    				});
    			});
    		}).catch(err => {
    			logger(LOG_ERR).write(err);
    			// как-нибудь обрабатываем
    		});
    
    };

    Отдаем готовую страницу:
    body
    	#appMount
    		block content
    
    	script.
    		window.__PRELOADED_STATE__ = !{JSON.stringify(preloadedState || {}).replace(/</g, '\\u003c')}


    Входная точка для рендера (App самый первый пример кода), это что-то вроде:
    // ...
    render() {
    	return (
    		<Layout>
    			<Switch>
    				<Route exact path="/" component={RouteContainers.Home} />
    
    				{/* Page */}
    				<Route path="/pages" component={RouteContainers.Page} />
    			</Switch>
    		</Layout>
    	);
    }
    // ...