I've searched and searched and can't seem to find a pattern for this. I'd consider myself an intermediate Vue dev, however, the backend is my strong suit. I'm working on an app that will be white-labeled by resellers. While it's possible to have multiple builds, avoiding that would be ideal. The setup is a stand-alone vue-cli SPA connecting to a Laravel api backend and using the Sanctum auth package. So I need calls to the same domain. The issue: resellers will be on their own domain. The ask: Is there a pattern/solution for dynamically loading configs (mainly baseURL) for different domains (other items would by theme/stylesheet). Currently I have a few typical entries:
i.e. axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL
Basically, based on the domain the site is being served on, I'd like a dynamic/runtime config. I feel like this has been solved, but I can't seem to use the right search terms for some direction, so anything is helpful. I've tried a few things:
1) Parsing in js, but can't seem to get it to run early enough in the process to take effect? It seems to work, but I can't get it to "click"
2) Hit a public API endpoint with the current domain and get the config. Again, can implement, but can't seem to get it to inject into the Vue side correctly?
Any resources, pattern references or general guidance would be much appreciative to avoid maintaining multiple builds merely for a few variables. That said, I don't think there's much overhead in any of this, but also open to telling my I'm wrong and need multiple builds.
End Result
url visited is https://mydomaincom
then baseURL = https://api.mydomiancom
url visited https://resellerdomaincom
then baseURL=https://api.resellerdomaincom
I don't think there is a common pattern to solve your problem - I haven't found anything on the net.
The best software design solution could be the following:
have a single back-end
distribute only the client to your customers/resellers
Obviously the back end could see the domain of the application from which the request comes and manage the logic accordingly.
Good luck with your project.
Honestly how the question is put it's not really clear to me. Although my usual pattern is to:
Create an axios instance like so:
export const axiosInstance = axios.create({
// ...configs
baseURL: process.env.VUE_APP_URL_YOU_WOULD_LIKE_TO_HIT
})
and then whenever I make a request to some api, I would use this instance.
EDIT: According to your edit, you can either release the client to each customer, and have a .env file for each and every of them, or you can have a gateway system, where the client axios end point is always the same, hitting always the same server, and then from there the server decides what to ping, based on your own logic
Related
I'm new to Laravel and I am handed an existing application that is composed of two parts:
1 - An admin backend built on Laravel and uses Vueify
2 - The frontend website built on next.js and uses react components
The admin part communicates with Laravel using the "web routes" but also uses the "api routes" as well since the vue components make AJAX requests using those "api routes".
I am now tasked with "connecting" the frontend part to the laravel app. The frontend part will be using AJAX as well to communicate with laravel but I was told I should not use the same "api route" that is used by the admin backend because that has a lot more privileges that should not be accessible by the frontend. Basically it's a security risk and that I should somehow separate the two.
I'm not actually sure which term to use.. I initially thought it was called "channel" but I see that channel is one of the 4 "ways" of connecting to laravel (the other 3 being web, api and console). So I think routes is the term to use and forgive me for the double-quotes.
I have made a simple diagram to show the structure I mean. What I need to know is is there a way to create a second api route that would be used exclusively by the frontend and would include only a limited set of priviledges. I imagine something like /frontapi/ or /webapi/ as opposed to /api/ which is used now by the backend.
Thanks a lot for your help and please correct me if I am using wrong terminology.
EDIT
Thank you all for answering the part regarding separating the route prefix and the api route files.
One part of the question that I realized late that I hadn't made clear was the importance of separating the API Keys for both APIs since I think that is the main security issue and what would really make then two individual API "Channels or ways". I think that is one reason why I was confusing about the terminology because "way" sounded to me more separate that just a "route". I've also edited the question to reflect that. Thank you again for taking the time to help.
You can decompose routes in as many files as you want, you can also give each file its own prefix (like how api.php routes start with /api)
The modification need to be done in App\Providers\RouteServiceProvider
//in map() add $this->mapApiTwoRoutes()
public function map()
{
$this->mapApiRoutes();
$this->mapApiTwoRoutes();//<---this one
$this->mapWebRoutes();
}
//now add the method mapApiTwoRoutes
protected function mapApiTwoRoutes()
{
Route::prefix('api2')//<-- prefix in the url
->middleware('api')//<-- api middleware (throttle and such check App\Http\Kernal.php)
->namespace('App\Http\Controllers') //<-- you can modify the namespace of the controllers
->group(base_path('routes/apiTwo.php'));//<-- file containing the routes
}
And that's it.
You need to define a new route file, firstly add a new entry $this->mapApi2Routes(); in the map() function in app\Providers\RouteServiceProvider.
Then add a new function in that file, basically copying the mapApiRoutes() function, call it mapApi2Routes(). You can use different middleware etc. for the new file.
The last step would be adding a new file api2.php in the routes folder.
I have a SignalR-service in two api-versions running in self-hosted Owin processes. I want to route traffic for api.service.com to either api1.service.com or api2.service.com depending on a http-header (api-ver) in a request. Is this possible to do with Owin middleware or in some other way without having to host this in IIS or using a 3rd party reverse proxy or similar? I was hoping it could be done with "Url Rewriting" but I don't know if this is possible in self-hosting?
Have you considered this, I am in the same boat and thinking it will resolve my problem. But to answer your question it does seem possible in self-hosted environments.
Owin.UrlRewrite
EDIT - This library doesn't work (at least I sure can't get it to work). I did experiment with an OWIN middleware of my own and it can be done with redirects but there is a flicker in the URL to essentially the hashtag url (before the client router kicks in (Aurelia in my case) and makes it the non-hash url). Best I can say is this is a limited use case (Self-hosting with need for URL Rewriting) as I cannot find a pre-made solution to do this.
So I have a site where I upload large video files using html 5 to azure storage using an sas signature. It seems to work fine on most systems and browsers but doesn't seem to work on iPhones. I finally routed the call through fiddler via proxy and got the response from the storage server.
Here is the CORs rule I have set up.
What am I missing here?
Good evening,
There are a few things I would like you to try simultaneously, when you get a chance:
1. Change your Allowed Headers to: "Origin,X-Requested-With,Content-Type,Accept,Authorization,Accept-Language,Content-Language,Last-Event-ID,X-HTTP-Method-Override, x-ms-*". NOTE: You may not need all of these, but for now, add them all to see if we can get it working.
2. Change your Allowed Methods to: NONE, PUT, OPTIONS
3. Set the Max Age (seconds) field to 0
4. Create another rule, and do not have a comma-separated list of allowed origins. Make a separate rule for each origin. (I've heard of certain browsers not liking the CSV).
Once all is said and done, if the above does not work, try removing "Authorization" from the allowed headers since it looks like you are not using that (but first, try it with it).
Please let me know if you make any progress with the above ideas.
Lets say I have a modular Sinatra app being used for a hundred sites, that I need to conditionally pull in routes for - if the request.host is example.com then I want to register the routes in file example_routes.rb - but if the request.host is say, other_example.com, then I want to register another set of routes completely, ignoring the first file completely.
One could also argue the app is trying to do too many things, but for the sake of this discussion, I'd love to hear some ideas and approaches.
Unfortunately, it appears that by the time the request object comes through (which is needed to register the new routes), that routes can no longer be registered. This is the nature of my problem.
As you’ve noticed, you can’t define routes based on a request since they are all setup at startup before the first request comes in.
One way to achieve what you’re after could be to make use of the :host_name condition:
get 'a_route', :host_name => 'example.com' do
# this route will only apply to requests to example.com
end
get 'a_route', :host_name => 'other_example.com' do
# this route will only apply to requests to other_example.com
end
These can be in different files if you want, and they won’t override each other so you can call them both at startup and requests will be routed to the appropriate code. Development and testing may be tricky, you may need to work out some way of accessing all routes locally.
I have two separate Laravel instances/sites running on a server and want to be able to generate a url to a named route on one from code within the other.
For example the following named route exists in the first instance:
Route::get('users/my_account', array('uses' => 'UsersController#myAccount', 'as' => 'my_account'))
In the second instance I want to generate a url to the route above. Can anyone think of a clean way to do this, without explicitly knowing the url (i.e. only knowing the name of the route 'my_account')?
Basically I want to expose the RouteCollection of one site to the other...
That's a pretty interesting question. There's no natively supported way of doing that and, from what I know, it won't ever.
You could try loading the routes file of the first application, parsing it's configurations (you will need that for reverse routing), construct a Router instance and use it, but I'm sure it won't be simple at all.
If you have a really, I mean really, good reason to use reverse routes, you can try building a small API on the first application. That API should receive the parameters necessary, those used in url($params), and return the full url (with domain and everything). Although, this will introduce some serious performance issues.
IMHO, stick to hard coded my_account, leave a comment on the first application route and/or controller explaining that it's used on another project and move on :)
I may call this a dirty trick. Supposing you have the following structure in your file system, where both paths are Laravel apps:
/path/to/apps/app1
/path/to/apps/app2
And you want to load the routes file from app1 into app2. You can do it as follow:
include "../app1/apps/routes.php";
$url = URL::route('register');
Voilà! But, although it worked for me there are some points to consider.
Include that file, will surely overwrites your current route collection for that process.
If that last is true, then you can have problem generating other URLs, maybe in your views.
The domain name will be of the current Laravel instance. It means that your URLs generated into app2 will hold the domain name of app1. I believe this is not what you want. But you can always generate non-absolute URLs with URL::route('register', null, false).