Into my component
axios.post('/api/' + 'create', {
name: 'new name'
},
{
headers:
{
'Content-Type': 'application/json'
}
}
)
into setupProxy.js , created from third part official instruction https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(proxy('/api/', {
target: 'http://my-api.com/',
changeOrigin: true
}));
};
When i call method with axios from my app
into browser console write
POST http://localhost:3000/api/create 404 (Not Found)
I tryed to write /api/* and /api/** into configuration http-proxy-middleware , but it did't help me.
What it does't work?
Please try using below code, with http-proxy-middleware version 1.0.0 onwards, you cannot use proxy as the name.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
app.use(createProxyMiddleware('/api',
{ target: 'http://localhost:3001/'
}));
}
Note: found this from one of the PR discussions here: https://github.com/facebook/create-react-app/issues/8550
I know its late and I came across the same issue. Keeping what worked for me so that others can give it a try.
I proxied this endpoint - https://services.odata.org/V2/Northwind/Northwind.svc/Customers?$format=json
setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
app.use(createProxyMiddleware('/api2', {
target: 'https://services.odata.org/V2/Northwind/Northwind.svc/',
changeOrigin: true,
pathRewrite: { '^/api2': '' }
})
);
}
Your .js file
triggerCORSCall() {
axios.get(`/api2/Customers?$format=json`)
.then(response => {
alert('Success');
}).catch(error => {
alert('Failure');
console.log(error);
})
}
Related
I setup sentry cloud in our React application but its blocked by AdBlockers (when turning Adblocker off, it works).
Is there someone who successfully setup a tunnel in a react application?
I played around with CORS but it didn´t work
Playing around with the tunnel property in Sentry.init from the nextjs example in https://github.com/getsentry/examples/blob/master/tunneling/nextjs/pages/api/tunnel.js is throwing a /tunnel 404 (Not Found) console error in react app although I added a route to this path into my App which contains the handle function from nextjs example.
...
Sentry.init({
dsn: 'https://mine#mine.ingest.sentry.io/mine',
integrations: [new BrowserTracing()],
environment,
tunnel: '/tunnel',
tracesSampleRate,
});
...
where I tried it directly via <Route path='/tunnel' component={(req, res) => handle(req, res)} /> and also by using a component <Route path='/tunnel' component={Tunnel} /> with
function Tunnel(props) {
let location = useLocation();
useEffect(() => {
if(location.pathname === '/tunnel') {
handle(props.req, props.res);
}
}, [location.pathname]);
return null;
}
I even tried Webpack Plugin
plugins: [
new SentryWebpackPlugin({
include: '.',
ignore: ['node_modules'],
org: 'my_org',
project: 'app',
authToken:
'myToken',
}),
],
but it also is being getting blocked
--- Update ---
At least for local development and testing its possible to adjust the webpack config.
const bodyParser = require('body-parser')
const sentryHost = '#o<orgId>.ingest.sentry.io';
// Set knownProjectIds to an array with your Sentry project IDs which you
// want to accept through this proxy.
const knownProjectIds = ['12345'];
app.use(bodyParser.text());
app?.post('/tunnel', async (req, res) => {
try {
const envelope = req.body;
const pieces = envelope.split('\n');
const header = JSON.parse(pieces[0]);
// DSNs are of the form `https://<key>#o<orgId>.ingest.sentry.io/<projectId>`
const { host, pathname } = new URL(header.dsn);
// Remove leading slash
const projectId = pathname.substring(1);
if (host !== sentryHost) {
throw new Error(`invalid host: ${host}`);
}
if (!knownProjectIds.includes(projectId)) {
throw new Error(`invalid project id: $. {projectId}`);
}
const sentryIngestURL = `https://${sentryHost}/api/${projectId}/envelope/`;
const sentryResponse = await fetch(sentryIngestURL, {
method: 'POST',
body: envelope,
});
sentryResponse.headers.forEach(([key, value]) => res.setHeader(key, value));
res.status(sentryResponse.status).send(sentryResponse.body);
} catch (e) {
captureException(e);
return res.status(400).json({ status: 'invalid request' });
}
res.send("POST res sent from webpack dev server")
})
but only for local testing. In production I guess we would use a proxy.
I've configured proxy, so http://localhost:3000/api/articles goes to http://127.0.0.1:8000/articles
svelte.config.js:
const config = {
kit: {
target: '#svelte',
vite: {
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8000',
rewrite: (path) => path.replace(/^\/api/, ''),
changeOrigin: true,
}
}
}
}
}
};
And requests like this works just fine:
<script context="module">
export const load = async ({ fetch }) => {
const res = await fetch('http://localhost:3000/api/articles');
...
}
</script>
But they do not work if host is omitted:
<script context="module">
export const load = async ({ fetch }) => {
const res = await fetch('/api/articles');
...
}
</script>
res contains 404 error
Playing with https://kit.svelte.dev/docs#configuration-host did not help
So, is it possible to omit host in load's fetch under proxy?
Thank you for sharing your vite configuration. I'm using #sveltejs/kit#1.0.0-next.522, which runs in dev mode on Port 5173 and i am runnig an http-server on port 8080, which simply responses »Good morning, world!«.
// vite.config.ts
import { sveltekit } from '#sveltejs/kit/vite';
import type { UserConfig } from 'vite';
const config: UserConfig = {
plugins: [sveltekit()],
server: {
proxy: {
'/api': {
target: 'http://[::1]:8080',
rewrite: (path) => path.replace(/^\/api/, ''),
changeOrigin: true
}
}
}
};
export default config;
// src/routes/hello/+page.svelte
<script lang="ts">
const hi = fetch('/api').then((x) => x.text());
</script>
{#await hi}
<p>Loading ...</p>
{:then data}
<p>Greeting: {data}</p>
{:catch error}
<p>Error {error.message}</p>
{/await}
On http://127.0.0.1:5173/hello my browser renders first Loading ... and then settles to Greeting: Good morning, world!.
I have been looking all over to try and figure out why this doesn't work. I have two applications, a client and a server. I'd like to proxy the client requests to the server. I have a route called /api/repositories. I can't have the proxy in the package.json, because it needs to work in production, also.
It is a Create React App project. Here are the important files.
setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = (app) => {
app.use(
createProxyMiddleware("/api", {
target: "http://my.server.com",
changeOrigin: true,
onProxyReq: (proxyReq) => {
console.log("logged");
if (proxyReq.getHeader("origin")) {
proxyReq.setHeader("origin", "http://my.server.com");
}
},
})
);
};
And I use it in a functional React component called Searchbar, as such:
Searchbar.js
import axios from "axios"
async function getRepos() {
const response = await axios({
method: "GET",
url: "/api/repositories",
});
return response.data;
}
function Searchbar() {
const [repos, setRepos] = useState([]);
// Get the repos on load
useEffect(async () => {
setRepos(await getRepos());
}, []);
return (
<div>
{repos.map((repo) => <p>{repo}<p>)}
</div>
);
}
However, when I run npm run start and run the development server, all of my API requests are going to http://localhost:3000/api/repositories, which obviously returns a 404 error. What am I doing wrong?
I have a requirement of using Hapi with create-react-app where Hapi acts as a proxy for api requests and also serves the React app.
I'm trying to get the routing working, but it doesn't seem to work with the current Hapi configuration.
Here is my server code:
const Path = require('path');
const Hapi = require('hapi');
const Inert = require('inert');
const init = async () => {
const server = new Hapi.Server({
port: process.env.PORT || 5000,
routes: {
files: {
relativeTo: Path.join(__dirname, '../build')
}
}
});
await server.register(Inert);
server.route({
method: 'GET',
path: '/{param*}',
handler: {
directory: {
path: '.'
}
}
});
const options = {
ops: {
interval: 1000
},
reporters: {
myConsoleReporter: [
{
module: 'good-console',
args: [{ request: '*', response: '*' }]
},
'stdout'
]
}
};
await server.register({
plugin: require('good'),
options,
});
await server.start();
console.log('Server running at:', server.info.uri);
};
init();
The index.html file loads fine when localhost:5000 is open. I have configured a route /dashboard in the react-router part. Hitting localhost:5000/dashboard gives a 404.
Questions:
How do I configure the routes in Hapi so that React takes over the routing after the index.html is rendered?
The current server code serves the app from the build folder after the app is built. How do I configure it for hot reload without ejecting from the create-react-app
Note: The routing works when running the react app with npm start. But this is without the Hapi server running.
I'm new to using Hapi so any pointers are appreciated.
So I played around with various hapi+inert combo and this is what ended up working for me.
server.js
const Path = require('path');
const Hapi = require('hapi');
const Inert = require('inert');
const routes = require('./routes');
const init = async () => {
console.log('Routes are', routes);
const server = new Hapi.Server({
port: process.env.PORT || 5000,
routes: {
files: {
relativeTo: Path.join(__dirname, '../build')
}
}
});
await server.register(Inert);
server.route(routes);
/**
* This is required here because there are references to *.js and *.css in index.html,
* which will not be resolved if we don't match all remaining paths.
* To test it out, comment the code below and try hitting /login.
* Now that you know it doesn't work without the piece of code below,
* uncomment it.
*/
server.route({
method: 'GET',
path: '/{path*}',
handler: {
directory: {
path: '.',
redirectToSlash: true,
index: true,
}
}
});
const options = {
ops: {
interval: 1000
},
reporters: {
myConsoleReporter: [
{
module: 'good-console',
args: [{ request: '*', response: '*' }]
},
'stdout'
]
}
};
await server.register({
plugin: require('good'),
options,
});
await server.start();
console.log('Server running at:', server.info.uri);
};
init();
/routes/index.js
/**
* Use this for all paths since we just need to resolve index.html for any given path.
* react-router will take over and show the relevant component.
*
* TODO: add a 404 handler for paths not defined in react-router
*/
const fileHandler = {
handler: (req, res) => {
console.log(res.file('index.html'));
return res.file('index.html');
}
}
const routes = [
{ method: 'GET', path: '/login', config: fileHandler },
]
module.exports = routes;
The key thing to observe here is that for any named path (in this case /login) we always return the index.html file. For all other paths we tell hapi to return files from out of our build directory so that any references to *.css or *.js file in our index.hml will be resolved and we don't face a 404.
I'm not sure how react-router takes over the path resolution once index.html is loaded, but it beyond the scope of this question and is a topic of discussion for another time maybe.
As for the second question regarding hot-reload, I am still trying to figure it out. For now I am running both the hapi server and react-app independently, as I need /api for use in the react-app. Any suggestions or answers are welcome.
Here is how I did it. Tested it. Version "#hapi/hapi": "^20.0.1".
const path = require("path")
const Hapi = require('#hapi/hapi')
const Boom = require('#hapi/boom');
const server = Hapi.server({
port: 3000,
host: '0.0.0.0',
routes: {
files: {
relativeTo: path.join(__dirname, 'YOU BUILD REACT DIR')
}
}
});
(async () => {
await server.register([
require('vision'),
require('inert')
]);
server.route(
[{
method: 'GET',
path: '/{path*}',
options: {
ext: {
onPreResponse: {
method(req, h) {
//for other path prefix /Api
const isApi = req.path.substr(1)
.toLowerCase()
.trim()
.split('/')[0]
.replace(/\//g, "") === "api"
const response = req.response
if (response && req.response.output && req.response.output.statusCode === 404) {
if (isApi)
return Boom.notFound("Not Found")
return h.file('index.html');
}
return h.continue
},
}
}
},
handler: {
directory: {
path: ".",
listing: false,
index: true
}
}
},
{
method: 'GET',
path: '/Api/test',
handler: () => "OK"
}
])
await server.start();
console.log('Server running on %s', server.info.uri)
})()
I have express backend and create-react-app2 as frontend , I am using setupProxy also. Now I have configured the app for google sign in however I am not getting proper redirect to index page after signin. Here is google oauth setup in console.developer.google.com
I am using passport google oauth20 for authentication:
Here my passport file:
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const keys = require('./../keys/secret');
const {User} = require('./../models/user');
module.exports = function(passport) {
passport.serializeUser(function(user, done) {
done(null, user.id);
});
passport.deserializeUser(function(id, done) {
User.findById(id, function(err, user) {
done(err, user);
});
});
passport.use(new GoogleStrategy({
clientID: keys.googleClientID,
clientSecret: keys.googleClientSecret,
callbackURL: '/auth/google/callback'
},
async (accessToken, refreshToken, profile, done) => {
const existingUser = await User.findOne({ 'google.id' : profile.id });
if(existingUser) {
done(null, existingUser);
}else {
const user = await new User({
'google.id' : profile.id,
isSocialAccountPresent: true })
.save();
done(null, user);
}
}
));
}
Here are my routes:
router.get('/google',
passport.authenticate('google', { scope: ['profile', 'email'] }));
router.get('/google/callback',
passport.authenticate('google'),
(req, res) => {
// Successful authentication, redirect home.
res.redirect('/');
});
Here is my setupProxy file:
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy("/auth/*", { target: "http://localhost:5000/" }));
app.use(proxy("/api/*", { target: "http://localhost:5000/" }));
};
Im gettting redirected to following URL :
http://localhost:3000/auth/google/callback?code=4/0gBVQE1R0m7FWFlg_QtXE2n9lvwVHoG_lNNH_zCueOeQAJZc6-8FygiH9u_9BfnQQt8yl2ECmD1gW3Gq9by25D4&scope=email+profile+https://www.googleapis.com/auth/userinfo.profile+https://www.googleapis.com/auth/userinfo.email
instead of http://localhost:5000/auth/google/callback
In your setupProxy.js file try this...
app.use(proxy("/auth/**", { target: "http://localhost:5000/" }));
app.use(proxy("/api/*", { target: "http://localhost:5000/" }));
You'll see I added an additional asterisk. This tells node to go one level deeper for "/callback".
Using res.redirect('/') you've to use the full path (http://localhost:5000....).
None of the answers here has worked for me. I believe that you would already have the file setupProxy.js in the src/ folder of your React client. Then, in that file, if you're setting changeOrigin: true for the object passed in the createProxyMiddleware function, you should remove that and that should fix the problem. At least, that worked for me.
This did the trick for me on
setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = (app) => {
app.use(
["/api", "/auth/google/callback"],
createProxyMiddleware({
target: "http://localhost:5000",
})
);
};