I'm tring to deploy a simple test app on cloud with digital ocean.
I created a new app with the vue cli (VUE3).
After i dockerized the app and exposed to 8080.
I configured the nginx so that it route traffic from port :80 to :8080 on the container.
Everything is ok, but when i try to visit the page i got this error "Invalid host header".
I searched on google and everybody suggest to create a vue.config.js file with this code:
module.exports = {
devServer: {
disableHostCheck: true
} }
I tried this solution but nothing is changed. How can i fix this error?
I also read that this kind of solution create vulnerabilities, is there a way to fix without this solution?
Thank you in advance for the response
In your vue.config.js file you can try this settings
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
allowedHosts: "all"
}
})
Found the solution!
The mentioned solutions above does not work for me.
I am not sure when the property allowedHosts was changed.
currently, we supposed to provide an array to the allowedHosts property.
devServer: {
allowedHosts: [
'yourdomain.com'
]
}
Just look for the file vue.config.js, then replace: yourdomain.com with your own personal domain.
An alternative to Oren Hahiashvili's answer when you don't know ahead of time what hosts will be accessing the devServer (e.g., when testing on multiple environments) is to set devServer.diableHostCheck in vue.config.js. For example,
module.exports = {
devServer: {
disableHostCheck: true
}
};
Note this is less secure than Oren Hahiashvili's answer, so only use this when you don't know the hosts, and you still need to serve using devServer.
Related
I'm looking for solution how to get a hostname from Nagios/Icinga by searching it by custom variable with cmd/status.cgi.
I have a custom variable with unique specific IDs on every host. I have to get the hostname by searching on ID. There is a documentation for CGI commands but I could not find the needed functionality: https://icinga.com/docs/icinga1/latest/en/cgiparams.html
UPD: I am using python for CGI requests. Maybe there is also a library to do that.
Does anyone know, if it is possible?
For Nagios at least, this is possible. You can call the host details on the objectjson.cgi for a hostgroup and in your result.json(), you would have the custom_variables for each of the hosts. With that, you can map an ID to the hostname.
make your request to https://<your_url>/nagios/cgi-bin/objectjson.cgi?query=hostlist&details=true&hostgroup=<your_hostgroup>
{...
"data": {
"hostlist": {
"<host1>": {
....
"custom_variables": {
<custom host variables dict>
},
"<host2>": {
....
}
}
}
}
untested! using python's requests module:
hostlist = result.json().get('data').get('hostlist')
id_map = {hostlist.get(host).get('custom_variables').get('your_id_key'):host for host in hostlist.keys()}
I am trying to connect with an iOS device to the Firebase Auth and RealTime Database Emulator.
The thing is, I can connect and use emulator through Firebase Admin using NodeJS on local machine (trough http://localhost:9000?ns=my-project).
Also I am able to connect with an iOS device to the remote Firebase server... But locally it doesn't work. It throws bunch of random errors, like this (when I try to complete registration/authentication):
Error Domain=NSURLErrorDomain Code=-1004 "Could not connect to the
server." NSLocalizedDescription=Could not connect to the server.,
NSErrorFailingURLStringKey=http://192.168.1.3:9099/www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=myKeyGoesHere
and
Optional(Error Domain=com.firebase.core Code=1 "Unable to get latest
value for query FQuerySpec (path: /news, params: { }), client offline
with no active listeners and no matching disk cache entries"
Here is firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"emulators": {
"auth": {
"port": 9099
},
"database": {
"port": 9000
},
"ui": {
"enabled": true
}
}
}
I changed rules just in case:
{
"rules": {
".read": true,
".write": true
}
}
but its not that.
and here is how I try to connect to database in my iOS application(my FirebaseManager class):
init(){
Auth.auth().useEmulator(withHost:"192.168.1.3", port:9099)
}
private lazy var newsNodeRef:DatabaseReference? = {
guard let urlString = getBaseURL() else {return nil}
let node = LocalConstants.kNewsRef // this has value of 'news'
return Database.database(url: urlString).reference(withPath: node)
}()
private func getBaseURL()->String?{
let environment = Environment()
guard let connectionProtocol = environment.configuration(PlistKey.firebaseConnectionProtocol), let baseURL = environment.configuration(PlistKey.firebaseDatabaseURL) else {return nil}
let urlString = "\(connectionProtocol)://\(baseURL)"
return urlString // this produces something like 'http://192.168.1.3:9000?ns=my-project' (its fetched from Configuration Settings file based on selected environment)
}
the thing is, the exact same setup works on remote server, if I just change the environment(which automatically changes base url).
I have also allowed insecure http loads in info.plist, just to be sure if it is not that, but still doesn't work.
This is what I get in console when I run emulators:
What is the problem here?
I replied a little late 😊.
I saw the solution you found. It didn't work for me but I'm sure it has worked for a lot of people.
I found a solution too.
Actually, I couldn't see a problem for iOS 15. My problem was that it didn't work on iOS 14 and earlier.
Solution;
First, you need the MacBook's IP address.
To find the IP address;
You can access it right under System preferences -> Network -> Status.
Then we need to make some changes in the firebase.json file.
Adding “host” : “IP” for each part.
Overwrite the “host” part with the “port” part.
"emulators": {
"auth": {
"host": "192.168.1.11”,
"port": 9100
},
"functions": {
"host": "192.168.1.11”,
"port": 5002
},
"firestore": {
"host": "192.168.1.11”,
"port": 8081
},
"database": {
"host": "192.168.1.11",
"port": 9001
},
"storage": {
"host": "192.168.1.11",
"port": 9200
},
"ui": {
"enabled": true
}
Then we need to add in swift codes.
We need to write the IP address in the host part.
More precisely, we will replace the parts that say localhost with the IP address.
let settings = Firestore.firestore().settings
settings.host = "192.168.1.11:8081"
settings.isPersistenceEnabled = false
settings.isSSLEnabled = false
Firestore.firestore().settings = settings
Storage.storage().useEmulator(withHost:"192.168.1.11", port:9200)
Auth.auth().useEmulator(withHost:"192.168.1.11", port:9100)
let db = Database.database(url:"http://192.168.1.11:9001?ns=firebaseappname")
Functions.functions().useFunctionsEmulator(origin: "http://192.168.1.11:5002")
I think this solution will work in JS, android and other languages.
I would appreciate it if you tried this solution and let me know if it works.
It worked for me.
I actually solved it. The solution/problem, I don't even know how to declare it, was with Local Network Access prompt & permissions and its buggy behaviour (as well how I was trying to access my Mac by ip).
At first I didn't even see a prompt shows every time, but I guess it was related to a wrong setup of a port, host etc.
But when I correctly set local computer's ip and reverted firebase.json to it's default settings (which is what worked for me), the prompt started to jump out every time.
The thing is, prompt's behaviour seems broken, because instead of jumping before you try to access devices in a local network, it pops out after that action is made. Quite fast, but still after Auth system responded, which doesn't make sense.
Here, it can be confusing, cause error that is returned from a Firebase Auth system in the case when you didn't allow Local Network Access usage, doesn't really tell you much about real cause. See my ( original question) above to see the errors.
After that terrible flow, I allowed access trough the prompt. Once I did that, on every next 'api' call towards Emulator was successful. Worked like a charm.
The real problem here is Local Network Access prompt. Cause we don't have at all control over it, so we can't that easily trigger it, or easily get info what user have selected/chosen at the moment / or before. It's triggered by the system in certain conditions.
Luckily this is just for development :) but I hope it will be fixed/improved soon, cause it should.
I found a lot about this topic and its considered as a bug Local Network Access Prompt problems on Dev portal:
I was also faced the same problem while using the firebase auth in iOS simulator
then i change my code little bit
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
if (Platform.isAndroid) {
await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
}
runApp(const MyApp());
}
I have made a check for only android and it works for me
Inside this method you can see it only works for android.
I define the URL for my backend service container in my docker-compose.yaml.
environment:
PORT: 80
VUE_APP_BACKEND_URL: "mm_backend:8080"
When the containers spin up, I inspect my frontend container and can verify that the env variable was set correctly as shown below.
However, when I attempt to use my frontend service to connect to my backend (retrieve data) it tells me that the VUE_APP_BACKEND_URL is undefined in the network tab.
The implementation and usage of this environment variable is such within my vue.js code
getOwners(){
fetch(`${process.env.VUE_APP_BACKEND_URL}/owners`, defaultOptions)
.then((response) => {
return response.json();
})
.then((data) => {
data.forEach((element) => {
var entry = {
value: element.id,
text: `${element.display_name} (${element.name})`
}
this.owners.push(entry)
})
})
Any assistance is appreciated.
This won’t work because process.env.someKey is not available on the browser. In other words, docker-compose won’t help much if you want to pass any env variable into your front end application. Simplest approach is to define the backendUrl in the code itself at one place and use it to make api calls. If you are not happy doing this, there are already some good answers/solutions available on StackOverflow for this same problem.
When I build my swagger.json file I do not know which host to use. However I can work it out when my page that hosts swaggerui loads (in fact I might want to offer the user a choice). I hoped to see an options.host on the config for the swaggerUI object - I dont see one. Is there an existing way of doing this that I cant find or do I simply have to hack my way through the code and add this capability (pointers to the best place to do it would be welcome)
Swagger has a built-in json definition for host config, or can accept multiple inputs.
{
"swagger": "2.0",
"info": {
"title": "Why API",
"description": "Don't make that mistake again",
"version": "0.0.1"
},
"host": "127.0.0.1:3000",
"schemes": [
"https"
]
}
Or
"host": "test.mydomain.com:3000",
"schemes": [
"https"
],
Or you can have a dynamic host by defining a var and calling a hostname or machine name or other environment variables.
dynamic example
if (typeof this.host === 'undefined' || this.host === '') {
this.host = location.host;
}
if (location.port) {
this.host = this.host + ':' + location.port;
}
Here is what I do, since the loaded in document is just a JSON object:
var swaggerDoc = require('./api/swagger.json');
if (process.env.NODE_ENV === 'development') {
swaggerDoc.host="localhost:" + process.env.PORT
}
// Initialize the Swagger middleware
swaggerTools.initializeMiddleware(swaggerDoc, function (middleware) {
// Other initialization
}
This way you don't pollute your API specification with development environment configuration.
In recent versions of Swagger UI it's possible to do this, for example in onComplete:
window.swaggerUi.api.setHost("your.host:4242");
If you are hosting it on same app server, just remove the host key from the json and provide relative path in key "basePath". as -
"basePath": "/rest/createcampaign".
two ways
One modify swagger.js so that it accepts host option. swagger-UI passes options to swagger-js so that works. I submitted a pull to swagger-js with this fix
Second choice is that swagger-UI accepts a 'spec' parameter. This means that the hosting page can load the swagger.json file, JSON.parse it , set 'host' in it and then pass to swaggerUi constructor. This is harder for the caller but doesn't require code changes to swagger
There are 2 ways which you can follow:
Load the index.html and replace the https://petstore.swagger.io/v2/swagger.json with the url where your swagger.json is hosting.
you can expose the local swagger.json on the same server.
When you follow this approach make sure you include static files in the end of above steps.
If you don't want to expose swagger.json as an API, copy the sawgger.json in the dist folder of swagger. The index.html and swagger.json must be in same repository for this. It is inside the index.html of dist folder of swagger-ui-dist.
const ui = SwaggerUIBundle({
spec: location.host,
url: "swagger.json",
dom_id: "#swagger-ui",
deepLinking: true,
presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
plugins: [SwaggerUIBundle.plugins.DownloadUrl],
layout: "StandaloneLayout"
});
// End Swagger UI call region
window.ui = ui;
};
Second way, host parameter in the swagger.yaml/swagger.json either make it empty
"host":""
or omit host parameter.
Swagger take the server's host as host where the swagger ui is hosted.
This is how I did this using the Java client:
DefaultApi api = new DefaultApi();
api.getApiClient().setBasePath("http://localhost:8080");
//call the API
if you use OpenApi 3.0
Variables can have arbitrary values, or may be restricted to an enum. In any case, a default value is required, which will be used if the client does not supply a value.
swagger doc
In the swagger-ui there will be the default value but the field is an input field so it is possible to customize it at runtime.
Swagger UI express itself is giving the following snippet it's getting the current host and publish dynamic with host
app.use('/api-docs', function(req, res, next){
swaggerDocument.host = req.get('host');
req.swaggerDoc = swaggerDocument;
next();
}, swaggerUi.serve, swaggerUi.setup());
I want to use gulp-webapp with php server (not the default built in one).
my gulp file looks like this, but here is the extracted part:
gulp.task('serve', ['styles'], function () {
browserSync.init("*", {
debugInfo: true,
open: true,
proxy: "localhost/nl_mobile/app"
})
});
gulp.task('watch', ['serve'], function () {
// watch for changes
gulp.watch(['app/*.html'], reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/images/**/*', ['images']);
gulp.watch('bower.json', ['wiredep']);
gulp.watch('app/bower_components/**/*.scss', ['styles']);
gulp.watch('app/bower_components/**/*.js', ['scripts']);
});
The problem is, the changed content inject to the browser but it does not refresh itself, i have to refresh it manually.
I also changed this line:
// .pipe(gulp.dest('.tmp/styles'))
.pipe(gulp.dest('app/styles'))
because, i cannon't specify
server: {
baseDir: ['app', '.tmp'],
directory: true
},
because it will fire up some kind of http based server which doesn't understand php :(
In case you didn't run across the answer already, Browser Sync supports a proxy config option that can be used to reverse proxy another web server, e.g. Apache, php -S. You'll also need to watch the PHP files in your project for updates to trigger the reload in the attached browsers. Happy to expound with examples as needed.