How to redirect using webpack proxy the dependencies of the redirected website? - redirect

I have two projects, one with documentation and one as the actual app.
When I access http://localhost:3000/docs my webpack setup is redirecting me to another server which is on http://localhost:4000 and where the documentation lives.
The redirect is happening but when it tries to load dependencies (.js, .css) the request is made on the original port (3000) and not the port 4000.
How can I redirect the server requests for the second website?
My webpack setup:
proxy: {
"/docs/**": {
target: "http://localhost:8080",
pathRewrite: { "^/docs": "" },
changeOrigin: true,
secure: false,
}
}

Related

NestJs socket Io works on a different port but not the same port

I am trying to implement socket Io into an application. However nestjs WebSocketGateway doesnt seem to get triggered when the port isnt defined. However when using a different port for WebSocketGateway the frontend connects succesfully.
This works
#WebSocketGateway(8001, {
path: '/socket-chat',
cors: {
origin: '*',
},
})
This doesnt work
#WebSocketGateway({
path: '/socket-chat',
cors: {
origin: '*',
},
})
When using the same port as the API, the middleware gets triggered however it seems to be working and sucessfully passing the request. I would like to use the same port but not sure how. Thank you :)

Nuxtjs - Error 404 with post request in production while working in local

I'm actually trying to use nuxt-mail in a personnal project,
During my development phase, I receive all my testing mails. And from there I did the following adjustments to do the exact same request from my builded site :
//nuxt.config.js
env: {
baseUrl:
process.env.NODE_ENV === 'dev'
? 'http://localhost:3000'
: 'https://my-domain.netlify.app'
},
My code when using the 'send' function :
this.$axios.$post(process.env.baseUrl + "/mail/send", {
config: 'contact',
from: document.getElementById('input-2').value,
subject: document.getElementById('subject').value,
text: "This is a text message",
})
It continues to work well with localhost/3000/mail/send but I have a 404 error once I build my site and using https:/ /my-domain.netlify.app/mail/send :
POST https://my-domain.netlify.app/mail/send [HTTP/2 404 Not Found 186ms]
Uncaught (in promise) Error: Request failed with status code 404
I'm actually struggling to solve this problem, am I missing something ?
Alright, so if your target is static, you can only do yarn generate.
If you do have the default, aka target: server, you can only yarn build.
Then, as talked about it a bit here: Sending mail in Nuxt.js with nuxt-mail
You cannot use a Node.js package in a static environment, so neither yarn generate nor Netlify will help you here. You need to yarn build and host it on something like Heroku.
One last step that you can do, is to try it locally with the following:
target: server
yarn build
yarn start
make your POST call with Postman or alike
If it does not work here, it is a code issue and you can look into the hosting one.
If it does work locally, you can proceed to the hosting issue that you'll face.
Well you just misunderstood the env field in the nuxt.config.js file.
That env field is passed to the $config Object of the Nuxt App and not passed to process.env.
What you want is to set the BaseUrl for the Axios Module
// nuxt.config.js
axios: {
baseURL: process.env.NODE_ENV === 'dev'
? 'http://localhost:3000'
: 'https://my-domain.netlify.app'
},
// or provide a runtime config
// server and clientside
publicRuntimeConfig: {
axios: {
browserBaseURL: process.env.BROWSER_BASE_URL
}
},
// serverside only
privateRuntimeConfig: {
axios: {
baseURL: process.env.BASE_URL
}
},
Edit:
Also when calling axios just do it like that if you implement the above changes
this.$axios.$post("/mail/send", {
// ... the rest of your code

Why does keycloak-client-adapter connect on http?

I am running a JEE app on a Wildfly server behind an Apache reverse proxy. Using the keycloak-client-adapter it connects to a Keycloak server also behind a apache reverse proxy. Both reverse proxies terminate the SSL connecion and connect to the Wildfly server by http.
When I am opening the JEE app, I am redirected to Keycloak and after I have entered my password I am also redirect to my app - all on SSL through the reverse proxy. But then I get a 403 - the reason for this: The App Wildfly tries to connect to Keycloak to validate the token on http. This is neither allowed ("ssl-required": "all" in keycloak.json and setup in realm) nor is http active at all.
From the app wildfly server.log
Adapter requires SSL. Request: http://www.domain.tld/myapp/
I have setup the reverse proxy of Keycloak according to the documentation, .well-known/openid-configuration looks good - all URLs are https
keycloak.json
{
"realm": "myrealm",
"auth-server-url": "https://sso.domain.tld/auth",
"ssl-required": "all",
"resource": "myresource",
"verify-token-audience": true,
"credentials": {
"secret": "secret"
},
"use-resource-role-mappings": true,
"confidential-port": 443,
"policy-enforcer": {}
}
Settings of the reverse proxy for the app
ProxyPreserveHost On
ProxyPass /myapp http://127.0.0.1:8080/myapp
ProxyPassReverse /myapp https://www.domain.tld/myapp
Anyone an idea how to force https on the validation? That should be the last step to get the setup running.

production build of ember app works, but when using ember serve, cookies not sent to api

I have a rest API running on localhost:8001/my_app/api/, and I have apache setup to reverse proxy it from localhost/my_app/api. That's working fine.
In order to have permissions to do anything with the api, it requires my session cookie, my csrftoken cookie and a X-CSRFToken HTTP header. I've configured adapters/application.js as follows:
adapters/application.js
import Ember from 'ember';
import DRFAdapter from './drf';
export default DRFAdapter.extend({
headers: Ember.computed(function() {
return {
'X-CSRFToken': Ember.get(document.cookie.match(/csrftoken\=([^;]*)/), '1'),
};
}).volatile(),
ajax: function(url, method, hash) {
hash = hash || {}; // hash may be undefined
hash.crossDomain = true;
hash.xhrFields = {withCredentials: true};
return this._super(url, method, hash);
}
});
If I do a ember build -prod and copy the contents of the dist dir to /var/www/myApp/, apache serves my app, and it works just fine.
It's when I try to use ember-cli's builtin development server where I run into problems. I'm getting 403 errors from my api. It turns out that while the X-CSRFToken header is being sent neither of my cookies are. If I look in my chrome developer tools, it shows that I have both cookies - they simply aren't in the request headers. They're both from localhost, so I'm a bit confused.
Also, I currently I have CORS on my rest backend setup. Here are the headers I'm currently receiving:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4200
I thought that since allow-credentials == true and allow-origin != * that cookies were supposed to be allowed. sigh.
Here's my API_HOST and contentSecurityPolicy:
config/environment.js
if (environment === 'development') {
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.API_HOST = "http://localhost"
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' localhost",
'font-src': "'self'",
'connect-src': "'self' localhost",
'img-src': "'self'",
'style-src': "'self'",
'media-src': "'self'"
};
}
As you can see above, the api requests are being sent through my reverse proxy. I've played around with ember serve --proxy trying both http://localhost:80/ and http://localhost:8001/ but neither have helped. I've also tried setting my development ENV.API_HOST = 'http://localhost:8001/'; with and without the various proxy values.
This edit, build, deploy, refresh my browser, test, & repeat process is REALLY slow and getting old REALLY fast.
Could someone please explain to me how to get the ember-cli development server to properly access my rest api?

Loading store data with rest proxy from server in Sencha Touch 2

I have searched around on the forums and read some other posts. However, I'm not sure how exactly to go about this. I have a store with a proxy that I'm trying to load with data from a server. I have tried both jsonp and rest for the type of proxy without luck. In both cases I get a 403 forbidden error. followed by an XMLHTTPRequest cannot load error.
Here's the error that I see in the Chrome console:
Here's my code:
Ext.define('EventsTest.store.Venues', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.Rest',
],
config: {
storeId: 'venuesStore',
model: 'EventsTest.model.Venue',
proxy: {
type: 'rest',
url: 'http://leo.web/pages/api/',
headers: {
'x-api-key': 'senchaleotestkey'
},
limitParam: false,
pageParam: false,
enablePagingParams: false
/*
extraParams: {
latitude: 45.250157,
longitude: -75.800257,
radius: 5000
}
*/
}
}
});
Security policy in browser and desktop is different so even if it fails in browser it can work in phone. But now the question is how to manage while you are developing the app, for that have a look at this similar question :
How to use json proxy to access remote services during development
Regarding that OPTION request which is getting 403 response, try setting withCredentials : false and useDefaultHeader : false. Details here
http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Operation-cfg-withCredentials
http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Connection-cfg-useDefaultHeader
I would suggest you to read more about CORS if you want to use remote services, you may choose to enable CORS on your server.
You're running your app on a local domain "sencha.test", but you're trying to access data on "leo.web" - the error is that you're trying to load data across domains, which isn't allowed via AJAX.
You say that JSONP doesn't work... why not? Does your server return valid JSONP?