Hello,
I am having a setupProxy.js file under the src/ folder to deal with Cross-Origin Issues from localhost. However, it doesn’t work and it is still blocked by CORS. It seems the setup proxy file is not being used at all. How to integrate setupProxy into FreshDesk React App?
Thank you very much,
Nhat Nguyen
hey @Nhat_Nguyen,
Ideally, CORS cannot be handled in the frontend javascript, CORS is imposed by the browser,
here is an article that breaks down in detail about the CORS how can one handle it?
hope this helps!
Stay Safe 
I understand, however, I just want to set up the proxy just for localhost as described in this doc (Deal with Cross-Origin Issues · GoodData.UI). How can I make the setupProxy.js work?
Could you please send us the contents of the setupProxy.js?
This is the setupProxy.js file
setupProxy.zip (436 Bytes)
Hello,
Are there any updates yet? I’m looking forward to the answer because it’s blocking me doing next tasks of the apps
Hello,
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,
},
}
Do you have other solutions?
Thank you
Nhat Nguyen
Hey @Nhat_Nguyen,
Apologies for the delay, It took so long for me to comeback to you 
The Package you’re using called http-proxy-middleware supports only express apps, and it doesn’t seem to support react or any other frontend apps as far as I understand.
Could you please check this package once?
in this case
module.exports = function (app) {
app.use(
proxy("/gdc", {
changeOrigin: true,
cookieDomainRewrite: "localhost",
secure: false,
target: "https://freshdesk-dev.na.gooddata.com",
headers: {
host: "freshdesk-dev.na.gooddata.com",
origin: null,
},
onProxyReq: function (proxyReq, req, res) {
proxyReq.setHeader("accept-encoding", "identity");
},
})
);
)
is the app parameter passed to the exporting function, an express app object?
AFIK react-scripts pass express app to the function exported from setupProxy.js. Correct me if am wrong.
Hello,
I think @arshath.h is right, we have used this library in other react apps and it works. So I believe the library is not the problem. This article is using this middleware as well Set up proxy to work with multiple APIs in create react app | by Pavan | Medium
Hey @Nhat_Nguyen,
The FDK react app does not use create-react-app and react-scripts to create and run the app, instead, it uses a custom Webpack middleware, which could be the reason for your issue,
you can use an external proxy if you are using fetch or Axios, by one of the following methods mentioned in the below links
Axios proxy:- Using Axios' Proxy Option - Mastering JS
Fetch proxy:- How to Make a Fetch Proxy in Javascript to Avoid CORS Errors with APIs | by crashdaddy | Medium
If possible you could also send us your app source code and we could investigate further why the setupProxy.js didn’t work.
Stay Safe
Hello,
As FD using a custom webpack middleware, I have set up devServer.proxy but it doesn’t work as well.
How can I have the devServer.proxy setup in my webpack.config.js is respected by the FDK? Is the fdk run running another default devServer.proxy right now?
Thank you
hey @Nhat_Nguyen,
Could you send us your custom Webpack config for us to check?
This is my webpack.config.js. Could you check it out for me? Thank you.
webpack.config.zip (1.6 KB)
Hey @Nhat_Nguyen,
Your webpack config has a webpack dev server, but the FDK uses the webpack-dev-middleware Development | webpack , unfortunately, the only left option is to set up a manual proxy, an express app using the http-proxy-middleware and manually pipe the request
or
you could also use chrome extensions Allow CORS: Access-Control-Allow-Origin - Chrome Web Store to disable CORS during development process
Stay Safe
Hello,
I tried the extension but it is not working.
Can you give me an example of
set up a manual proxy, an express app using the
http-proxy-middlewareand manually pipe the request
I have tried the link you gave me above, but they don’t work either. It’s really confusing to me. I don’t know how to integrate it with the FreshDesk App. I have to create a new server on port 10001, right?
Axios proxy:- Using Axios’ Proxy Option - Mastering JS
Fetch proxy:- How to Make a Fetch Proxy in Javascript to Avoid CORS Errors with APIs | by crashdaddy | Medium
Let me get you an example as soon as possible, could you just tell which http client are you using, for eg axios, fetch, jquery ajax or any other? so i could write an example in that client?
Hello,
Thank you very much for your support.
I have successfully set up a proxy. After discussing with my team, I understand what you mean is I will create a small express server with the proxy configured and run it locally (on some other port) and then in the application use localhost:THAT_PORT as a hostname.
For anyone who meets the same problem as me, I have followed this doc to set up the Proxy: Build a Node.js Proxy Server in Under 10 minutes!
Then I call the API to the port of the Express Server.