11

我正在使用在端口 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 中创建这样的设置？

4

3 回答 3

18

仔细查看create-react-app 代码会发现这是设计使然：

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

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

有关Fetch API 和 cookie的进一步阅读表明，我必须包含参数 credentials:true 才能发送 cookie：

fetch('/api/me', {
  credentials: 'include'
})
于 2016-11-30T19:59:01.093 回答
1

是的，有可能：

  "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

于 2018-08-14T23:05:10.277 回答
0

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

简单的 create-react-app 工作正常，但 tit 没有配置任何 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

于 2017-10-20T04:27:46.410 回答