Прокси-сервер create-react-app работает только с fetch API, но не в простом браузере.

Я использую довольно маленькое приложение create-react-app, работающее на порту 3000, для настройки прокси-запросов на внутренний сервер, работающий на порту 8080. Если я введу в адресную строку браузера http://localhost:3000/api/me, я верну страницу index.html, но если я использую fetch API чтобы получить /api/me, попробуйте вызвать бэкэнд.

Проблема в том, что мне нужно пройти аутентификацию с серверной частью, которая установит файл cookie, но, поскольку я не могу получить доступ к странице входа в систему http://localhost:3000/login, я не могу получить файл cookie.

В другом проекте, который я извлек из приложения create-react-app, у меня есть небольшой файл для запуска webpack-dev-server с конфигурацией

  proxy: {
    "*": "http://localhost:9191"
  }

который выполняет прокси-запросы даже при вводе в адресную строку браузера.

Можно ли создать такую ​​настройку в приложении create-реагировать?


person Ido Ran    schedule 30.11.2016    source источник


Ответы (3)


Подробно изучите create- код приложения реакции показывает, что это сделано по замыслу:

Для одностраничных приложений мы обычно хотим вернуться к /index.html. Однако мы также хотим соблюдать proxy для вызовов API. Итак, если указано proxy, нам нужно решить, какой запасной вариант использовать. Мы используем эвристику: если запрос accepts text/html, мы выбираем /index.html. Современные браузеры включают text/html в заголовок accept при навигации. Однако такие вызовы API, как fetch(), обычно не принимают text/html. Если эта эвристика вам не подходит, не используйте proxy.

Запуск GET из http://localhost:3000/api/me внутри расширения REST Console возвращает правильный результат.

Дальнейшее чтение об Fetch API и файлах cookie показывает, что я чтобы включить параметр учетные данные: true для отправки файлов cookie:

fetch('/api/me', {
  credentials: 'include'
})
person Ido Ran    schedule 30.11.2016
comment
Это было полезно, поскольку убедило меня попробовать использовать расширенный прокси-сервер, который сработал. Я пытался проксировать путь, который возвращает текстовый файл с экспрессом. github.com/facebook/create-react-app/blob/master/packages/ - person arodjabel; 11.03.2018

Да, это возможно:

  "proxy": {
    "/api": {
      "target": "<url>",
      "ws": true
    }
  },

См. https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually

person Nick    schedule 14.08.2018
comment
Обновленная ссылка: create- react-app.dev/docs/proxying-api-requests-in-development/ - person Keegan Teetaert; 13.03.2020

У меня есть собственное приложение для реагирования, и я попытался добавить прокси в package.json, но он не работает.

Простое приложение create-react-app отлично работает, но не имеет настроенного веб-пакета.

Вот мой веб-пакет:

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve('./dist'),
        filename: 'index_bundle.js'
    },
    module: {
        loaders:[
            { 
                test: /\.js$/, 
                loader: 'babel-loader', 
                exclude: /node_modules/ 
            },
            { 
                test: /\.jsx$/, 
                loader: 'babel-loader', 
                exclude: /node_modules/ 
            },
            { 
                test: /\.css$/, 
                loader: "style-loader!css-loader?modules" 
            },
            { 
                test: /\.png$/, 
                loader: "url-loader?limit=100000" 
            },
            { 
                test: /\.jpg$/, 
                loader: "file-loader" 
            },
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {     
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx' ,'.json'],
        modules: [path.join(__dirname, 'src'), 'node_modules']
    },
    plugins: [HtmlWebpackPluginConfig]
}

Мой пакет.json:

{
  "name": "A2ZPressMaterial",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --history-api-fallback",
    "webpack-watch": "webpack -w",
    "express-server": "node ./server",
    "dev": "concurrently --kill-others \"npm run webpack-watch\" \"npm run express-server\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "proxy": "http://localhost:3001",
  "dependencies": {
    "classnames": "^2.2.5",
    "css-loader": "^0.28.7",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.4",
    "material-ui": "^0.19.2",
    "path": "^0.12.7",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-lazyload": "^2.2.7",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.5.6",
    "webpack-dev-server": "^2.8.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "concurrently": "^3.5.0"
  }
}

Я получаю 404 на мои вызовы ajax/fetch

person badal jain    schedule 20.10.2017