The create-react-app proxy only works with apetch apetch, but not in easy browser access

Question

I use a rather small create-response-app, which works on configuring port 3000, for proxy requests to a server server running on port 8080. If I put http://localhost:3000/api/me in the address bar of the browser, I I will return the index.html page, but if I use the fetch API to get /api/me , it will try to call using the backend.

The problem is that I have to authenticate using the backend that will set the cookie, but since I cannot access the login page http://localhost:3000/login , I cannot get the cookie.

In another project that I selected from the create-react-app application, I have a small file to run the webpack-dev server with the configuration

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

which executes proxy requests even if it is placed in the address bar of the browser.

Is it possible to create such an installation in a create-react-app?

Answer 1

A closer look at the create-response-application code shows that this is by design:

For single page applications, we usually want to go back to /index.html. However, we also want to respect proxy for API calls. Therefore, if a proxy specified, we need to decide which reserve to use. We use heuristics: if the request accept text / html, we select /index.html. Modern browsers include text / html in the accept header when navigating. However, API calls like fetch() usually do not accept text / html. If this heuristic is not suitable for you, do not use a proxy .

Running GET http://localhost:3000/api/me inside the REST Console extension returns the correct result.

Further reading of the Fetch API and cookies indicates that I must include the credentials of the: true parameter to send cookies:

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

Answer 2

I have my own responsive application and I tried adding a proxy to package.json, but it works nit.

A simple creation-response application works just fine, it does not have a customized web package.

Here is my 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] } 

My 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" } } 

I get 404 in my ajax / fetch calls