I am using Next.js and Axios libraries.
My axios requests look like this:
axios.get('/api/users/1')
This worked while I had API and rendering server inside same instance.
But now my API backend is fully separated.
While in dev mode, it is hosted at localhost:3001 while frontend (next) dev server is hosted on localhost:3000. In production rendering server is hosted at https://example.com while API is hosted at https://api.someoherdomain.com.
How to keep axios requests clean (without importing stuff and prefixing url string by hand), keeping them like /api/users/1 but automactially making them localhost:3000/api/users/1 while running development mode and https://example.com/api/users/1 while hosted in production.
I need something like https://github.com/zeit/next.js/tree/master/examples/with-custom-reverse-proxy but to work on both production and development mode.
Not a recommended approach to production scale (hence
explicit dev flag) as we should scope proxy as outside UI applications
and have separate web server taking care of that.
If this is not possible, I am looking for the most elegant way to handle this. Any suggestions?
In production we use Plesk (which uses Ngnix).
You could create an axios instance and set the baseUrl parameter based on a environment variable :)
Documentation here: https://github.com/mzabriskie/axios#creating-an-instance
Related
So our team has created one dashboard using ruby, through that we are calling our APIs using NGINX proxy, so flow is like Dashboard will call NGINX Proxy which will call end system APIs.
Now the issue is we are authenticating requests coming from NGINX proxy by decoding the rack session cookie in the headers, which is working fine in our lower environments like dev/stage, but today when I moved our code to Production server, I saw that we are not sending cookies from Production servers, though it is recommended but we want that these cookies for our use case.
As I am new to this can, anyone help me how to enable sending cookies from production servers as well.
Maybe someone call help me to find a solution.
I have an angular app in a different folder of my git project.
Normally i use ng serve and open the frontend on its dedicated port.
I start the spring boot app on its own port and set a CORS filter to allow it.
However now that we are testing OAUTH i would like the frontend to be served be backend.
My problem is that ng serve is in memory and i dont know what would be the best option to include them into the backend.
I have tried to build them into the backend and then rebuild with mavent but that takes way to long for every small change on the frontend.
You may use a proxy which forwards requests to APIs or UI based on the Path. Something like
http://localhost:8888/api ---> [Proxy Server (localhost:8888)] ---> Spring Boot API (http://localhost:8080
http://proxy-domain.com:proxy-port/ui ---> [Proxy Server (localhost:8888)] ----> Angular App (http://localhost:4200)
For the proxy server, you can use free tools like Fiddler and have a rule there to route based on the URL patters (/api or /ui)
I'm developing a GraphQL API on Laravel for mobile and web applications. One of the frontend developer asking me to disable CORS on the server side because he cannot work with the API due to CORS problem. The Vue application on his localhost is making requests to my Test API which is on a URL.
From what I understand this isn't problem for the server side, CORS is s security measure for the server. I believe for development Vue developer need to handle this problem with adding a proxy to his localhost.
You are both responsible to get the application done and pointing fingers at one another does not solve this problem. This is not a technical problem.
Adding a proxy to the frontend development environment is one way to solve this problem. Another way is to whitelist the domain they are working on, or even putting a wildcard in there as the frontend developer suggested. CORS is a security feature, but it is meaningless for a development environment that does not contain any production data. Being able to get a development environment up and running without jumping through a lot of hoops helps productivity.
Work together. Your responsibility is to create an application, and without a frontend you are also failing at your task of delivering that application.
How to disable the web security in Firefox or how to solve CORS issue in Firefox during development?
Things tried but did not work:
The option of filtering in "about:config" and setting the "security.fileuri.strict_origin_policy=false" doesn't work
Tried few add-ons like "CORS-Everywhere" (https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/). Doesn't work.
How to disable the web security in firefox
Don't. It gives unrealistic results for testing.
how to solve CORS issue in Firefox during development
Ideally: Create a development environment that is just like the live environment.
The server side code will, at some point, need development work performed on it. Your team will need the ability to create a development server with test data in it for that. Use the same development server for working on the client side code.
That way you can do you development work:
without making test calls to the live server (so you never need fake test users doing fake actions on the live server with the risk that test data will escape somewhere end users will see it).
without cross origin issues (because your development server for your client side code will be the same as the development server for the URL you are requesting)
able to use relative URLs
with a browser that acts like the browsers used by end users
As a quick and dirty hack which doesn't have most of the benefits of using a proper test environment: Use a proxy server that maps requests to the same origin as your development environment to the live environment.
I used Charles proxy for that before I moved to having proper development environments.
Is it possible to run an in-app HTTP server with NativeScript either as a background service or as part of the foreground app itself ? I am looking to utilize a common code base across a system of applications which would communicate to a local server which handles some parts of the application's communication to my servers. Where, I intend to create a HTTP server in the app which can just serve as a REST server for the app. Is it possible ?
Thank you.
I don't think its possible since nativescript doesn't offer any module or plugin that supports the creation of http servers. First option is to look for a nativescript module in npm that supports http server creation, Second option is to create an http server using the native API's with javascript, Third and last option (which I prefer) is to make your own server using nodejs or any server side script and run that server on a certain machine then from your nativescript app you can access that server using the fetch module or the http module :)