I'm trying to config my Docusaurus web app to proxy the request to my api endpoint. For example, if I make a fetch request in my app fetch(/api/test), it will proxy the request from localhost:3000/api/test to my {{api_endpoint}}/api/test, but I'm still struggling to do it.
What I've done:
add a proxy field in package.json
create a setupProxy.js in the src folder
These 2 are based on the Proxying API Requests in Development
Another approach way is I created a custom webpack plugin and add it to the Docusaurus config
Does anyone have experience on this problem ? Thanks for reading, I really appreciate your help.
I went down the exact same path. Ultimately Docusaurus runs its Webpack dev server under the hood which is why the proxy field and setupProxy.js were not working as expected. I was able to get the outside API call by proxy and solved CORS errors by creating a Docusaurs plugin like you are attempting. Adding the "mergeStrategy" and "changeOrigin" were the keys to getting it all working.
// plugins/webpack/index.js
module.exports = function (context, options) {
return {
name: "cusotm-webpack-plugin",
configureWebpack(config, isServer, utils) {
return {
mergeStrategy: { "devServer.proxy": "replace" },
devServer: {
proxy: {
"/YOUR_COOL_ROUTE": {
target: "https://YOUR_COOL_API/",
secure: false,
changeOrigin: true,
logLevel: "debug",
},
},
},
};
},
};
};
Related
I have a fullstack application dockerized and deployed on a VPS with a custom domain, but there's an issue where requests I made on the frontend give me a Cors error like this.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://backend:8080/api/link/. (Reason: CORS request did not succeed). Status code: (null).
I normally use Create react app and it doesn't give me this error, but for this I'm using Vite and can't seem to find out what's causing it.
On my backend I've added the Springboot annotation to deal with the Cors error.
#CrossOrigin(origins = "*")
and also disabled Cors in my security config.
On the frontend side, I added this which points to my backend (Docker service)
"proxy": "http://backend:8080",
and this is my vite.config.js
export default defineConfig({
server: {
proxy: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
secure: false,
ws: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
port: 3000,
},
plugins: [react()],
});
I can make requests from Postman and it works as expected
You need to proxy the request
CORS requests will be blocked by the browser for security reasons To avoid this, the backend needs to inject allow origin header for you.
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(proxy('/api', {
target: 'http://www.api.com',
logLevel: 'debug',
changeOrigin: true
}));
};
or you can use the google chrome extension Allow CORS: Access-Control-Allow-Origin
link: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
There are many suggestions online, i too have tried most of em.
Using #CrossOrigin("URL") over your controller class
Disabling cors via object of HttpSecurity, such as http.cors().disable();
Ultimately, i had to implement WebMvcConfigurer interface to resolve this issue.
#EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("URL");
}
}
Hope this helps
Thats the error on console
How can access that data without getting blocked by cors in server cloudways? Im using react.js
You can write a little proxy for your react application that is used in your dev environment.
For this, you can simply use the package http-proxy-middleware:
https://www.npmjs.com/package/http-proxy-middleware
After installation, you need to create a file, e.g. "setupProxy.js" in your
/src directory with the according settings. Something like this can work:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
app.use(
'/storage',
createProxyMiddleware({
target: 'https://firebasestorage.googleapis.com',
changeOrigin: true,
pathRewrite: {
'/storage': '/',
},
})
);
};
In you app, you then need not to call https://firebasestorage.googleapis.com/whateverpath, but your proxy: /storage/whateverpath.
I'm trying to make a web app using rocket for the backend and react for the frontend. However, when I try to make a proxy I keep getting rayk#pop-os:~/repos/homrs/frontend$ curl http://localhost:3000/api Proxy error: Could not proxy request /api from localhost:3000 to http://localhost:8000 (ECONNREFUSED).
The things I've currently tried are adding "proxy": "http://localhost:8000" to my package.json in the application and I've always tried configuring the proxy manually as suggested here https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually.
Here is the backend code I'm using to test:
#![feature(proc_macro_hygiene, decl_macro)]
#[macro_use] extern crate rocket;
#[get("/")]
fn index() -> &'static str {
"Hello, world!"
}
fn main() {
rocket::ignite().mount("/api", routes![index]).launch();
}
Here is the setupProxy.js I attempted to use
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8000',
changeOrigin: true,
})
);
};
I also have attempted to use http://localhost:8000 and http://localhost:8000/. I have also tried changing the rocket port from 8000 to 3001 and that also did not work.
Edit: Here is a link to the github repo: https://github.com/GimpFlamingo/homrs
The people here: https://github.com/plouc/mozaik/issues/118 were having a similar issue.
I was able to reproduce your issue and found adding address = "127.0.0.1" to Rocket.toml and then setting "proxy" to "http://127.0.0.1:8080" fixed it for me!
I am basically a webpack newbie and here's the issue I have come accross. I was following a tutorial on how to set up a proxy url in webpack and used this syntax:
proxy: {
'/api/*': {
target: 'http://localhost:5000',
secure: false
}
},
But this gives me this error!
The tutorial i was following was before webpack 4 came out so I think webpack 4 has some other way of doing it.
Heres what i want to achieve:
* I have a webpackdev server on port 8080 and my express backend is listening on port 5000 i want fetch requests like api/ to go to 5000/api instead of 8080/api.
I hope you guys can help
I fixed this issue with the following code:
devServer: {
proxy: {
'/api/*': {
target: 'http://localhost:5000',
secure: false
}
},
},
So I have an appengine webapp which includes cloud endpoints deployed locally on port 8888.
The error message in the title occurs on startup of our webpack-dev-server which runs on port 3000 and proxies all requests starting with /_ah/api/* to http://localhost:8888. The exact console error is as follows:
The odd thing is, when I open this url in another tab and switch the port to 8888 the request comes through, and the webpack-dev-server can also proxy the requests to the backend from then on.
Most other issues I read on this suggested setting the appengine config in gradle to the following:
httpPort = 8888
httpAddress = "0.0.0.0";
However I already did that so that does not seem to be the issue.
My relevant webpack config is as follows:
module.exports = webpackMerge(commonConfig, {
...
output: {
...
publicPath: 'http://localhost:3000/'
},
devServer: {
port: 3000,
open: true,
proxy: {
'/_ah/api/*': 'http://localhost:8888/'
}
}
});
Some backends don't work properly without changeOrigin: true. You can use it like this:
proxy: {
'/_ah/api/*': {
target: 'http://localhost:8888/',
changeOrigin: true,
secure: false
}
}
If that doesn't work, does the proxy path (/_ah/api/) need to be included in the request? You could try if ignoring the path works:
proxy: {
'/_ah/api/*': {
target: 'http://localhost:8888/',
ignorePath: true
}
}
And if that doesn't work, I would try out removing the last part of the proxy path: /_ah/api/* to /_ah/api. This should do the same, but the first one is deprecated.