I am calling a HTTPS API in Vue3 project with Vite, but the proxy doesn't work - api

I am calling a HTTPS API in Vue3 project with Vite, but the proxy doesn't work,
seems some problems with TSL certificate or other security policies.
Anyone have a clue to solve it?

Related

Vue app hosted on IIS always looks for its API at localhost

Some background: I have a .NET Core API that serves as the backend for my Vue app. I've configured a bunch of environment variables in my Vue app that point to localhost:port to access that API. This works fine in my development environment, but now I'm trying to deploy this to IIS.
For now, I took the simple route to hosting my solution: both the API and the Vue app are on different sites in IIS.
I'm deploying the API as a web deploy package (using MSDeploy), and it seems to be working just fine. For the Vue app, all I'm doing is copying the npm run build output from /dist/ over to the site's physical directory in IIS. There's no web.config or anything (I wasn't sure if this was needed).
Here's the issue I'm running into: if I try browsing the Vue app on the server running IIS, everything seems to work fine, because the Vue app makes its API requests to localhost, which of course is valid. However, if I try browsing my Vue app from a different machine, it doesn't work because it's still trying to make requests to localhost on the "client machine", which obviously won't work because there's no API on the client machine.
I'm a novice when it comes to IIS, so I'm not sure if this is something that I need to address in my Vue app (i.e. by making the API URL/port configurable during deployment), or if it's a misconfiguration in IIS. Any ideas?

Netlify with Basic authentication

I have created a Netlify web application using Vue.js as frontend framework and netlify function on backend side. I am trying to apply Basic authentication using build in Netlify functionality with _headers file. I only need the Basic Authentication for staging environment so I followed the guidens from this article, but the problem is that the Basic-Auth promts for username and password on every xhr call that the frontend is making to Netlify functions. Is there a solution for this, or have anyone experienced or did configuration like this before. I am looking for solution no matter if it is with configuration file or custom code implementation. Thank you!

SignalR in Azure Static Web App doesn't work

I have API (.NET Core 3.1), Website (GatsbyJS) and mobile app (React Native). I'm deploying API on my Digital Ocean droplet, while website is hosted as Azure Web Static App. API is hosted on subdomain (api.mysite.com).
Locally, SignalR works fine for website and mobile. When deployed, SignalR works fine only for mobile while for web it's throwing errors. Handshake is okay but fails afterwards.
Some errors after few ways of trying to make it work:
There was an error with the transport
Handshake was cancelled
I tried using HTTP as well as HTTPS. Also tried to use skipNegotiation but that fails as well. I'm out of ideas on what I can try and what can be the problem.
Thanks
Problem was in configuration on Digital Ocean where API was hosted. More info how to solve websocket issue can be found here: https://learn.microsoft.com/en-us/aspnet/core/signalr/scale?view=aspnetcore-3.1#linux-with-nginx

Is there a way to proxy api calls in production

I have a vue.js frontend and I need to make api calls to an external api which doesn't allow cross-origin.
Is there a way to proxy this in the vue frontend, in development I used a devServer proxy and this worked. I could always forward it through my own spring backend but this seems like a worse solution then just proxy in the fontend.
You can't do it in production, proxy through bachend server seems right solution for you.
Also you can do a lot of stuff, like caching answers from external api, working with data immediately, without additional frontend work. Just try to do it.
If i were you, i'd just create/add separate service on backend that should work with that api.

Use Wepack for Client only in strongloop-loopback

I want to use webpack bundling for only client part of Strongloop Loopback project (I want to use vueJs in client or frontend). I've been looking at loopback-webpack-plugin. As there is no proper documentation for it, I am unable to use in way I wanted.
Thanks in advance.
Since you are going to write your client in VueJS, the configuration of your build process for the client is going to be pretty much independent of LoopBack. Please look for resources on how to configure Webpack for VueJS.
There is one part relevant to LoopBack though: how to serve you VueJS front-end files from a LoopBack application. In a typical LoopBack project scaffolded via lb, the client (front-end) assets created by Webpack should be placed in the client directory. See Adding a static web page in LoopBack's documentation to learn how to expose the content of the client directory as a web application.