Question

我正在使用在端口3000设置上运行的非常小的create-react-app来代理对在端口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-react-app中创建此类设置？

Answer 1

仔细研究create-react-app code揭示这是设计的：

对于单页应用，我们通常希望回退到/index.html。但是，我们还要尊重proxy API调用。因此，如果指定proxy，我们需要决定使用哪个回退。我们使用启发式：如果请求accept的text / html，我们选择/index.html。现代浏览器在导航时将text / html包含在accept标题中。但是，像fetch()这样的API调用通常不会接受text / html。如果此启发式方法不适合您，请不要使用proxy。

在REST控制台扩展中运行http://localhost:3000/api/me的GET会返回正确的结果。

关于Fetch API and cookies的进一步阅读表明我必须包含参数凭证：true以发送cookie：

fetch('/api/me', {
  credentials: 'include'
})

Answer 2

是的，有可能：

ttyS1::respawn:/bin/busybox getty -L ttyS1 115200 vt100

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

Answer 3

我有自己的反应应用程序，我尝试将代理添加到package.json，但它正在工作。

简单的create-react-app工作得很好，没有配置任何webpack。

这是我的网站：

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]
}

我的package.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"
  }
}

我的ajax / fetch调用获得了404

create-react-app proxy仅适用于fetch api，但不适用于浏览器的简单获取

3 个答案: