I am new to vue and maybe I miss some fundamental concept here but I am not able to force my vue app to call the backend from the frontend server origin (ip:port). It seems that the API calls arriving from the client IPs instead - cause an issue that the backend CORS control cannot work.
I try to create a simple hello-world app and host a separate backend and frontend server in a docker container on a NAS running at local network. The ip of the NAS on the local network is 192.168.0.150. I mapped the port: 5000 to the backend and 6080 to the frontend.
I use python fastAPI as a backend and vuejs as a frontend. everyting works fine if I allow all the origins in the fastapi.middleware.cors setting :
Backend - fastapi.middleware.cors settings :
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
#app.get("/")
def home(request:Request):
client_host = request.client.host
client_port= request.client.port
return {"message": "Hello, World!","client_host": client_host,"client_port":client_port }
'''
frontend/src/main.js - axios setting
axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://192.168.0.150:5000/'; // the FastAPI backend
frontend/view - api call:
<template>
<div>
<p>{{ msg }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Ping',
data() {
return {
msg: '',
};
},
methods: {
getMessage() {
axios.get('/')
.then((res) => {
this.msg = res.data;
})
.catch((error) => {
console.error(error);
this.msg = error.msg;
});
},
},
created() {
this.getMessage();
},
};
</script>
regardless of how I host the Vue app (with dev server -npm run serve- or after a build with a HTTP server) the message above in the tmeplate shows the ip of the devices on the network from where the page is opened and not the frontend (192.168.0.150:6080) as I would expect.
So that if I set the fastapi middleware to restrict the origins then the API call fails:
allow_origins=["http://192.168.0.150:6080/"]
I also tried to set up a proxy, based on this: https://techformist.com/vuejs-proxy-error-for-backend-connection/ but keep the same behavior.
would you please help with what I miss here?
is my understanding wrong that the API should feel that it is called from the frontend host:port rather than the clients?
Related
I'm trying to figure out how to mock calls to the auth0 authentication backend when testing a next js app with React Testing Library. I'm using auth0/nextjs-auth0 to handle authentication. My intention is to use MSW to provide mocks for all API calls.
I followed this example in the nextjs docs next.js/examples/with-msw to set up mocks for both client and server API calls. All API calls generated by the auth0/nextjs-auth0 package ( /api/auth/login , /api/auth/callback , /api/auth/logout and /api/auth/me) received mock responses.
A mock response for /api/auth/me is shown below
import { rest } from 'msw';
export const handlers = [
// /api/auth/me
rest.get(/.*\/api\/auth\/me$/, (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
user: { name: 'test', email: 'email#domain.com' },
}),
);
}),
];
The example setup works fine when I run the app in my browser. But when I run my test the mocks are not getting picked up.
An example test block looks like this
import React from 'react';
import {render , screen } from '#testing-library/react';
import Home from 'pages/index';
import App from 'pages/_app';
describe('Home', () => {
it('should render the loading screen', async () => {
render(<App Component={Home} />);
const loader = screen.getByTestId('loading-screen');
expect(loader).toBeInTheDocument();
});
});
I render the page inside the App component like this <App Component={Home} /> so that I will have access to the various contexts wrapping the pages.
I have spent about 2 days on this trying out various configurations and I still don't know what I might be doing wrong. Any and every help is appreciated.
This is probably resolved already for the author, but since I ran into the same issue and could not find useful documentation, this is how I solved it for end to end tests:
Overriding/configuring the API host.
The plan is to have the test runner start next.js as custom server and then having it respond to both the next.js, as API routes.
A requirements for this to work is to be able to specify the backend (host) the API is calling (via environment variables). Howerver, access to environment variables in Next.js is limited, I made this work using the publicRuntimeConfig setting in next.config.mjs. Within that file you can use runtime environment variables which then bind to the publicRuntimeConfig section of the configuration object.
/** #type {import('next').NextConfig} */
const nextConfig = {
(...)
publicRuntimeConfig: {
API_BASE_URL: process.env.API_BASE_URL,
API_BASE_PATH: process.env.API_BASE_PATH,
},
(...)
};
export default nextConfig;
Everywhere I reference the API, I use the publicRuntimeConfig to obtain these values, which gives me control over what exactly the (backend) is calling.
Allowing to control the hostname of the API at runtime allows me to change it to the local machines host and then intercept, and respond to the call with a fixture.
Configuring Playwright as the test runner.
My e2e test stack is based on Playwright, which has a playwright.config.ts file:
import type { PlaywrightTestConfig } from '#playwright/test';
const config: PlaywrightTestConfig = {
globalSetup: './playwright.setup.js',
testMatch: /.*\.e2e\.ts/,
};
export default config;
This calls another file playwright.setup.js which configures the actual tests and backend API mocks:
import {createServer} from 'http';
import {parse} from 'url';
import next from 'next';
import EndpointFixture from "./fixtures/endpoint.json";
// Config
const dev = process.env.NODE_ENV !== 'production';
const baseUrl = process?.env?.API_BASE_URL || 'localhost:3000';
// Context
const hostname = String(baseUrl.split(/:(?=\d)/)[0]).replace(/.+:\/\//, '');
const port = baseUrl.split(/:(?=\d)/)[1];
const app = next({dev, hostname, port});
const handle = app.getRequestHandler();
// Setup
export default async function playwrightSetup() {
const server = await createServer(async (request, response) => {
// Mock for a specific endpoint, responds with a fixture.
if(request.url.includes(`path/to/api/endpoint/${EndpointFixture[0].slug}`)) {
response.write(JSON.stringify(EndpointFixture[0]));
response.end();
return;
}
// Fallback for pai, notifies about missing mock.
else if(request.url.includes('path/to/api/')) {
console.log('(Backend) mock not implementeded', request.url);
return;
}
// Regular Next.js behaviour.
const parsedUrl = parse(request.url, true);
await handle(request, response, parsedUrl);
});
// Start listening on the configured port.
server.listen(port, (error) => {
console.error(error);
});
// Inject the hostname and port into the applications publicRuntimeConfig.
process.env.API_BASE_URL = `http://${hostname}:${port}`;
await app.prepare();
}
Using this kind of setup, the test runner should start a server which responds to both the routes defined by/in Next.js as well as the routes intentionally mocked (for the backend) allowing you to specify a fixture to respond with.
Final notes
Using the publicRuntimeConfig in combination with a custom Next.js servers allows you to have a relatively large amount of control about the calls that are being made on de backend, however, it does not necessarily intercept calls from the frontend, the existing frontend mocks might stil be necessary.
I am really new in shopify app development.
I have an allready a working app what i have created with next.JS (I have worked with node/express too)
I just would like to create a connection between my frontend and backend with a simple endpoint.
It means i send a get request and i receive something nonsense. The main goal would be that is the backend can communicate with the frontend.
I have created a git repo too.: https://github.com/akospaska/shopify-outofthebox
The app has been created with shopify-cli
In my pages folder there is an index.js file, where my frontend "lives".
I have created (or i think ) 2 differend endpoints.
pages/api/test endpoint: "/test"
server/server.js endpoint: "/test2"
When i call the endpoints i get an error.
I have read the documentation but it just makes me confused.
How should i authenticate between my backend and frontend exactly?
Thank you for your help Guys in advance.
The endpoints aren't pages, they are routes on your express app.
Here is a related question with answer:
Node backend communication between react frontend and node backend | Shopify related
Here is a checklist for you how to set up an endpoint (POST):
1.) Navigate to your index.js file in the /web directory
2.) Insert this code:
app.post("/api/test", async (req, res) => {
try {
res.status(201).send(response);
} catch (error) {
res.status(500).send(error.message);
}
});
}
app.post() sets up a route in your project.
3.) Navigate to your index.jsx file in /pages directory and insert this code (I set up a callback when a form submit button is clicked):
const handleSubmit = useCallback(
(body) => {
(async () => {
const parsedBody = body;
const response = await fetch("/api/test?shop=YOUR_SHOP_URL, {
method: "POST",
body: parsedBody
});
if (response.ok) {
console.log("Success");
}
})();
return { status: "success" };
},
[]
);
<Form onSubmit={handleSubmit}>
</Form>
it should call this API endpoint. So now you communicate with an API endpoint.
Maybe I could help you with my answer!
When I'm on the local server localhost:8080 in vue project everything is great, but when I deploy the project to my real host I get the problem
mounted(){
axios.get('http://localhost/online-store/src/database_api/Admin/recent_product.php')
.then((res) => {
this.products= res.data
console.log(res.data)
})
},
configure your axios in main.js (entry point )
axios.create({
baseURL: process.env.VUE_APP_BASE_URL
})
Then directly call api ..it will append base url based on your env parameter
axios('/online-store/src/database_api/Admin/recent_product.php')
Note : Don't forget to add .env as per environment
I am using the plugin Nuxt Perfect Cache to server-side cache my QPI requests to an external service.
I am using the cacheFetch method on Component level and this component is loaded on a dynamic page (defined by its slug). When I navigate to the dynamic page, the API call is not cached in Redis, however when I reload the page, the caching happens as expected.
Below is how my code is structured:
_slug.js (for /users)
<template>
<h1>{{ user.name }}</h1>
<Posts :author = user.id>
</template>
<script>
import Posts from '~/components/Posts.vue'
export default {
components: { Posts },
async asyncData({params}) {
const user = await fetch(`/users/${params.slug}`)
.then(res => res.json())
}
}
</script>
And inside Posts.vue I use the perfect cache cacheFetch method to fetch the list of posts, something like:
props: ['author'],
async fetch() {
this.posts = await this.$cacheFetch({ key:`user--#{this.author}--posts`, expire: 60 * 60 },
async () => {
return await fetch(`/users/#{this.author}/posts`).then(res => res.json())
})
},
data() {
return {
posts: []
}
}
When I load the user page directly in the browser, the json response for the posts is saved in Redis as expected. When I navigate from within the application using a NuxtLink, the user page is displayed correctly (including the posts), but no key is set or get from Redis.
How can I ensure the API calls are cached when users interact with the app?
redis is only available in server side not client side when you are navigating in client side you don't have access to redis you can set absolute link to render server side when user is navigating but I don't recommend this.
the best solution is cache data in redis in your api.
I am making my first steps with websockets in my application.
My frontend is using vue.js while my backend uses flask.
In my component I wrote this.
created() {
console.log('Starting connection to WebSocket Server');
// this.connection = new WebSocket('wss://echo.websocket.org');
this.connection = new WebSocket('wss://192.168.0.22:5000');
this.connection.onmessage = function (event) {
console.log(event);
};
this.connection.onopen = function (event) {
console.log(event);
console.log('Successfully connected to the echo websocket server...');
};
},
In my flask app.py besides other stuff I have this
app = Flask(__name__)
socketio = SocketIO(app)
CORS(app)
"""Socket.IO decorator to create a websocket event handler"""
#socketio.on('my event')
def handle_my_custom_event(json, methods=['GET', 'POST']):
print('received my event: ' + str(json))
socketio.emit('my response', json, callback=messageReceived)
def messageReceived(methods=['GET', 'POST']):
print('message was received!!!')
if __name__ == "__main__":
socketio.run(app, debug=True)
In my browser I get the error that firefox could not make a connection to wss://192.168.0.22:5050. I already tried the frontend with the websocket from a tutorial which is commented out now.
I am not sure, which url I should use for my own backend or what I have to add there.
Sorry if this is obvious but I am a complete beginnern.
Thanks in advance!
EDIT:
In chrome the error I receive is "WebSocket connection to 'wss://192.168.0.38:5000/' failed: WebSocket opening handshake timed out"
Also as I saw this error when trying out stuff, maybe this question could be relevant? vue socket.io connection attempt returning "No 'Access-Control-Allow-Origin' header is present" error even when origins have been set
so the part for the socket which i ended up using for the client/component:
import io from 'socket.io-client';
created() {
// test websocket connection
const socket = io.connect('http://192.168.0.38:5000');
// getting data from server
// eslint-disable-next-line
socket.on('connect', function () {
console.error('connected to webSocket');
//sending to server
socket.emit('my event', { data: 'I\'m connected!' });
});
// we have to use the arrow function to bind this in the function
// so that we can access Vue & its methods
socket.on('update_on_layouts', (data) => {
this.getAllLayouts();
console.log(data);
});
},
The Flask server code stayed as shown above. Additionally here is an example from my flask server to emit the update_on_layouts socketio.emit('update_on_layouts', 'success')