React proxy does not work even though config is set properly

Asked
Active3 hr before
Viewed126 times

7 Answers

react
90%

Check this documentation ,The development server will only attempt to send requests without text/html in its Accept header to the proxy., Should a rookie hint be mentioned in the documentation or not?

Pretag
 Pretag team - issue, fix, solve, resolve
88%

how do you test your proxy? using fetch / ajax / browser direct to url? the proxy in create react app only works when it's a fetch or ajax request.,I had these same issues. Seems if I fetch('/') the root path, it returns the index.html from the React public folder. If I use any other path, fetch('/api') for instance, proxy works and points to the Express server.,It's a bit counter-intuitive but the best we can do to support both use cases (client-side routing and proxying).

{
   "name": "fanmojoReact",
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
      "babel-core": "^6.20.0",
      "babel-loader": "^6.2.9",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-react": "^6.16.0",
      "css-loader": "^0.26.1",
      "eslint": "^3.12.2",
      "eslint-config-standard": "^6.2.1",
      "eslint-config-standard-react": "^4.2.0",
      "eslint-plugin-node": "^3.0.5",
      "eslint-plugin-promise": "^3.4.0",
      "eslint-plugin-react": "^6.8.0",
      "eslint-plugin-standard": "^2.0.1",
      "react-scripts": "0.8.4",
      "style-loader": "^0.13.1",
      "sw-precache": "^4.2.2",
      "sw-precache-webpack-plugin": "^0.7.0",
      "webpack": "^1.14.0"
   },
   "dependencies": {
      "es6-promise": "^4.0.5",
      "isomorphic-fetch": "^2.2.1",
      "lodash": "^4.17.4",
      "react": "^15.4.1",
      "react-dom": "^15.4.1",
      "react-redux": "^5.0.1",
      "react-router": "^3.0.0",
      "react-router-redux": "^4.0.7",
      "redux": "^3.6.0",
      "redux-act": "^1.1.0",
      "redux-logger": "^2.7.4",
      "redux-router": "^2.1.2",
      "redux-saga": "^0.13.0",
      "webpack-dev-server": "^1.16.2"
   },
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build && sw-precache --config=sw-precache-config.js",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
   },
   "proxy": "http://172.21.25.169:3000"
}
load more v
72%

Run the new React application to make sure it was generated properly.,If you see a spinning React logo, then we're good to go.,To run both the server and React application at the same time we need to add a couple more things to package.json.

npm init react - app my - new - app
cd my - new - app
load more v
65%

This is the setupProxy.js file setupProxy.zip (436 Bytes),Hello, Using setupProxy is extremely necessary for my project, and it’s blocked me for days from continuing my work. If setupProxy file doesn’t work, how can I set up the Proxy inside the FreshDesk app? I have tried to set it up in the webpack.config.js, but it doesn’t work either,Sorry if I’m pushing you, but are there any updates yet? Because I really need to set up the Proxy, and I don’t know how to make the setupProxy works in the FreshDesk app. It appears to never run into the setupProxy file.

Hello,
Using setupProxy is extremely necessary for my project, and it’s blocked me for days from continuing my work. If setupProxy file doesn’t work, how can I set up the Proxy inside the FreshDesk app?
I have tried to set it up in the webpack.config.js, but it doesn’t work either

const proxy = {

   "/gdc": {

      changeOrigin: true,

      cookieDomainRewrite: "localhost",

      secure: false,

      target: "https://freshdesk-dev.na.gooddata.com",

      headers: {

         host: "https://freshdesk-dev.na.gooddata.com",

         origin: null,

      },

      onProxyReq(proxyReq) {

         proxyReq.setHeader("accept-encoding", "identity");

      },

   },

};
module.exports = {

   devServer: {

      proxy,

   },
}
load more v
75%

CORS error is only thrown by browser so to get rid of this error, we make call to our local server and server will forward the call to API server. Now since the API call has been made by server not the browser, browser won’t report any error. Create-react-app has out of the box configuration to handle this. We only need to make proxy entry in package.json and everything starts working.,Create react app is a wonderful utility to quickly start a react project. You don’t need to worry about Webpack configurations as create-react-app (also popularly known as CRA) gives most of the things out of the box. Web app generated with CRA runs on localhost:3000 by default. It gives you everything you needed to start your development. If your web app is trying to consume any API running on different host and port, you will get CORS (Cross Origin Resource Sharing) error in browser.,Above code means that if your are making call to /api/ then call will forward to http://api.xyz.com/api/ end point. Whatever key you specify in app.use method, the call will be forwarded to <domain>/<key>/<rest_path>.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Instance-level: Use when you have many npm packages in different GitLab groups or in their own namespace. Be sure to comply with the package naming convention. , Project-level: Use when you have few npm packages and they are not in the same GitLab group. The package naming convention is not enforced at this level. Instead, you should use a scope for your package. When you use a scope, the registry URL is updated only for that scope. ,Use the GitLab endpoint for npm packages

npm--version
load more v
22%

Note that while this "no-op" works for JavaScript objects, it does not work for native browser objects like DOM Elements.,In this example, we are using a native JavaScript object to which our proxy will forward all operations that are applied to it.,The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.

const target = {
   message1: "hello",
   message2: "everyone"
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);
load more v

Other "react-undefined" queries related to "React proxy does not work even though config is set properly"