How to communicate with a backend built with lumen and served with apache virtual host from a Vue frontend? - vue.js

I have a Vue frontend through which I want to communicate with a backend built with lumen. I have the backend on apache virtual host. It is a local development setup. The virtual host works and I can access it from http://dawn.axeapi.com/ and postman works fine with it.
I've set VUE_APP_API to http://dawn.axeapi.com/ in the .env file. The Vue app is being served with npm run serve.
I am getting following errors in the console and the network tab in developer tools.
But if I double click the requests (e.g. 3304272), I can see JSON data from the backend.
If I serve the backend with php -S localhost:8000 -t public and update VUE_APP_API accordingly, everything works as it should.
Is this because of CORS?
Does apache configuration affect this?
I read in Vue documentation that API requests to the API server need to be proxied during development if the frontend and the backend API server are not running on the same host. So I tried adding
devServer: {
proxy: 'http://dawn.axeapi.com/'
}
to vue.config.js but didn't work.
I am running Apache that ships with macOS.
What am I missing here?

For anyone running Apache that ships with macOS, disable these Apache modules and it should work. I had to disable all eight. You can try one at a time.
mod_authn_file.so
mod_authn_core.so
mod_authz_host.so
mod_authz_groupfile.so
mod_authz_user.so
mod_access_compat.so
mod_auth_basic.so
mod_reqtimeout.so

Related

Mod wsgi and apache configuration

I'm facing the following issue: i've a public web server running on a given URL, say, www.mysite.com.
It uses apache2.
I've developed a python web app and I want to make it publicly accessible.
Locally, I use the command
mod_wsgi-express start-server wsgi.py
to start the server and everything works.
However, I would like to link only a specific URL to my app, such as mysite/my_test, leaving apache2 serving all the other requests.
In other words, I would like to set the server URL for mod_wsgi-express to mysite/my_test port 80.
By default I get Server URL: http://localhost:8000, and I would like to change this.
I've tried the --mount-point option, but I didn't see any difference.
I know I can change the apache configuration and adding WSGIScriptAlias but I'm facing multiple issues, so I'm searching for a quickest and easiest way.
Hope this is clear.
Thanks.

Quarkus, Heroku and different environments

I'm currently developing a simple webapp with seperated frontend (Vue) and backend (quarkus REST API) project. For now, I've setup a MVP, where the frontend is displaying some simple data which is called from the backend. To get a working MVP i need to setup CORS support. However, first i want to explain my setup:
Setup
I'm starting developing environment of my frontend with npm run serve and of my backend with ./mvnw quarkus:dev. Frontend is running on localhost:8081 and backend running on localhost:8080.
Heroku allows to run your apps locally aswell with the command heroku local web. Frontend is running on port 0.0.0.0:5001 and backend on 0.0.0.0:5000.
To achieve this setup i setup two .env files on my frontend which are pointing to my backend api. If i want to work in development mode the file .env.development is loaded:
VUE_APP_ROOT_API=http://localhost:8080
and if i run heroku local web the file .env.local with
VUE_APP_ROOT_API=0.0.0.0:5000
is loaded.
In my backend I've set
quarkus.http.cors=true
in my application.properties.
Now I want to deploy those two projects to heroku and use it in production. Therefore I setup two heroku projects and set a config variable in my frontend project with the following value:
VUE_APP_ROOT_API:https://mybackend.herokuapp.com
Calls from my frontend are successfully working!
Question
For the next step, I want to restrict it more and just enable my frontend to call my API. I know i can set something like
quarkus.http.cors.origins=myfrontend.herokuapp.com
However, I dont know how i could do this on quarkus with different environments (development, local and production)? I've found this link but I don't know how to configure heroku and my backend app correctly. Do i need to setup different profiles which are applied on my different environments? Or is there another solution? Do i need Herokus Config Variables?
Thanks for the help so far!
quarkus.http.cors.origins is overridable at runtime so you have several possibilities.
You could use a profile and have everything set up in your application.properties with %prod.quarkus.http.cors.origins=.... Then you either use -Dquarkus.profile=prod when launching your application or you use QUARKUS_PROFILE=prod as an environment variable.
Another option is to use an environment variable for quarkus.http.cors.origins. That would be QUARKUS_HTTP_CORS_ORIGINS=....
My recommendation would be to use a profile. That way you can safely check that all your configuration is consistent at a glance.

Laravel serve getting ERR_CONNECTION_REFUSED on localhost

I'm having an issue with my local laravel server. I'm building an API, and I need to test from another device, but the only url which is working is:
localhost:8000
If I try
127.0.0.1:8000
or using my machine local IP
192.168.0.6:8000
I have a ERR_CONNECTION_REFUSED from chrome (I tried with safari too).
There is no 'blocking' extensions
I found the answer: artisan serve isolates the host, so if I want to specify it, I need to do:
php artisan serve --host=127.0.0.1
Depending on what project you may in! In our case we had a bought project!
And https is configured by default! So https://..../app.css will not be accessible!
When you visit the link again in chrome it switch to http://.../app.css and it will work!
For our bought base code an env variable was setup and i just disabled it as bellow:
You may like to disable it in development!
This link may be helpful too!
How to force Laravel Project to use HTTPS for all routes?
Otherwise you can setup https to work well! Check how to do that with apache! Or nginx !
Otherwise know that you can't do it with php artisan serve! And you'll need to disable force https!
See the option bellow! (check the first answer to see if you can still use php artisan serve! And read the second one! To get why php artisan serve doesn't support https)
Laravel php artisan serve to mimic HTTPS
I hope this may help some! That fall on the same problem! Which is a line of things to check to add to the list here!
php artisan serve :
Laravel development server started on http://localhost:8000/
so you can only access to this server by http://localhost:8000/
I had that problem because I forgot to execute npm run devto launch Vite server.
Open up the terminal window in your working directory and run
php artisan serve
You will then be able to access your laravel local development through your browser by using the URL http://localhost:8000

How to call Parse locally in web page when hosting Parse server?

I built a reactjs app using express that's hosted on heroku. I'm also using Parse and hosting it on the same app on heroku.
I was wondering if there's a way to locally call Parse, instead of specifying the Parse SERVER URL (which is basically at the same place as my app).
Can I set the SERVER URL to an absolute path instead?
To run parse-server locally make sure you have node added to your environment variables and go to your apps main directory in cmd. Call "node index.js" and if you've setup your parse-server correctly it should specify a http://localhost:port
address at which it's being hosted. Open that address in your browser and viola. You're hosting parse-server locally.

How to config WAMP apache server to allow cross domain requests of ajax?

I am working on an sencha-touch-2.1.0-based application.The application deals with some cross-domain requests.
We wrapped the js files with Android code with PHONEGAP to make the application run in a Android Phone.
And i have installed the wamp server whose apache version is 2.4.4.
I want to test the UI of the app in a Android Phone browser,so i put the src files of the sencha touch application in the www directory of the apache server of the WAMP.
But i have got an request error in the console of Chrome in PC:
Origin http://192.168.1.102 is not allowed by Access-Control-Allow-Origin.//192.168.1.102 is the ip of my WAMP server.
After hours in google,i find an easy way like
`<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</IfModule>`
way to alter the httpd.conf of the apache server to allow ajax cross domain requests.
But it dose not work.
So how can i change the httpd.conf of the apache server ?
You were on the right track. The only thing left to do now is to enable the headers module. This can be done as follows:
click on the wamp icon in your systray
go to Apache > Apache modules
check the option 'headers_module'
After you do this, wamp will restart and the configuration you put in your post will work