I created a basic React project using CRA. I'm trying to configure a proxy using setupProxy.js. The proxy works, however all the "on" methods are not being called, such as onProxyReq.
My configration:
module.exports = {
webpack: {
devServer: {
proxy: {
'/api': {
onProxyReq: function() {
console.warn("not reached!!!!");
...
Why is this happening? Is it a known recent bug?
Related
I am trying to use Cypress 12 to run compnent tests in a Vue.js 2 app. Below is my cypress.config.ts file:
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
baseUrl: "http://localhost:9090/.......",
defaultCommandTimeout: 60000,
},
component: {
devServer(cypressConfig: CypressConfiguration) {
// return devServer instance or a promise that resolves to
// a dev server here
return {
port: 9090,
close: () => {},
};
},
},
});
I setup a custom devServer in vue.config.js (otherwise Cypress starts uses its own localhost):
module.exports = {
devServer: {
port: 9090,
proxy: 'http://localhost:8080'
}
}
However, the tests wont load
When I run e2e tests, all is fine: tests appears, calls localhost:9090. However, if I want to run only component tests, it just gets stuck trying to load the tests.
It is not a DevTools problem as I have looked into that. All other configuration settings are standard.
I'm using vue.js with a flask server.
The 8080 vue.js dev env forwards axios queries to port 80 , cause my python flask server is always running on port 80, waiting for web services calls.
This is my vue.js vue.config.js file :
module.exports = {
outputDir: "dist",
// relative to outputDir
assetsDir: "static" ,
devServer: {
proxy: 'http://localhost:80'
}
};
everything works except that Im getting sock-js infinite loops, especially when developping on port 8080 :
How can I stop theses queries, please .
I there any way to only forwards AXIOS queries to port80, not the others things ?
https://github.com/webpack/webpack-dev-server/issues/1021
EDIT : Tried this with no luck
vue.config.js :
module.exports = {
outputDir: "dist",
// relative to outputDir
assetsDir: "static",
devServer: {
proxy: {
"^/api": {
target: "http://localhost:80"
}
}
}
};
error :
Error: Request failed with status code 404
EDIT : Hey Guys, finally resolved with this code , simply write this in your vue.config.js at the root of the vue.js app, so the wrong sockjs-node queries will get ignored, only web services will be forwarded :
module.exports = {
outputDir: "dist",
assetsDir: "static",
devServer: {
proxy: {
"/api": {
target: "http://localhost:80"
}
}
}
};
Then, do an axios query from vue.js like this :
const path = '/api/read_linear_solution';
axios.post(path, this.form)
Then, in ur python or node server , the web service must look like this đź‘Ť
#app.route('/api/read_linear_solution', methods=['POST'])
I run an R Shiny app on port 3000 which serves my vue.js App like this:
library(shiny)
server <- function(input, output, session) {
histogramData <- reactive({
mtcars
})
observe({
session$sendCustomMessage("histogramData", histogramData())
})
}
ui <- function() {
htmlTemplate("dist/index.html")
}
# Serve the bundle at js/main.js
if (dir.exists("dist/js")) {
addResourcePath("js", "dist/js")
}
# Serve the bundle at js/main.js
if (dir.exists("dist/css")) {
addResourcePath("css", "dist/css")
}
# Serve the bundle at js/main.js
if (dir.exists("dist/img")) {
addResourcePath("img", "dist/img")
}
shinyApp(ui, server)
For development, I would change it like this:
ui <- function() {
htmlTemplate("public/index.html")
}
However, I can not always run the build process just to connect the apps, I want to use the dev server to connect the apps and send data back and forth.
I have setup a vue.config.js with the following configuration to create a connection between the two apps.
const path = require('path')
module.exports = {
publicPath: ".",
devServer: {
port: 4000,
contentBase: path.resolve(__dirname, 'public'),
proxy: {
'/': {
target: 'http://localhost:3000'
},
'/websocket': {
target: 'ws://localhost:3000',
ws: true
}
}
},
transpileDependencies: [
"vuetify"
]
}
This was taken from a github repository, I am acutally quite clueless how to archieve this connection. My idea was to connect go on localhost:4000 and receive the data from localhost:3000, but nothing gets passed:
TypeError: Cannot read property 'addCustomMessageHandler' of undefined at VueComponent.mounted (HelloWorld.vue?140d:42)
This is based on the following method in my vue component (which works perfectly after the build process):
mounted: function () {
window.Shiny.addCustomMessageHandler('histogramData', histogramData =>
this.data.histogramData = histogramData
)
Can anyone tell me what´s wrong and help me to setup the connection correctly?
I cannot seem to get the devServer: proxy setting working in my vue / express app.
My vue.config.js file is in the root of my client folder and looks like:
module.exports = {
devServer: {
proxy: {
'api': {
target: 'http://localhost:5000'
}
}
},
transpileDependencies: [
'vuetify'
]
}
I'm sending a request from the frontend using axios like this:
const response = await http.get("/api/auth/authenticate");
My express app is running on localhost:5000 and I've configured endpoints as such:
...other endpoints
app.use("/api/auth", authController);
The request appears in my network tab as:
Request URL: http://localhost:8080/api/auth/authenticate
and returns a 404 error.
What am I missing here?
Since now it is not fetching from your backend, but searching for some static content (hitting 8080, vue must be running on this port). Try using, so that it get redirected to proxy:
proxy: {
'^/api': {
target: 'http://localhost:5000',
ws: false,
changeOrigin: true
},
Or just '/api' instead of '^/api'
I have been searching and reading thru documentation on this topic but I was unbale to make it work.
https://cli.vuejs.org/config/#devserver-proxy
I made my Vue.js application normaly by the commnand
vue create my-app
so I'm running the app by command
npm run serve
on http://localhost:8080/. Pretty standart stuff.
But my app needs a PHP backend which is running at https://localhost/
So I setted up the proxy setting in vue.confic.js file in my root directory.
Content of vue.confic.js file:
module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'https://localhost/',
ws: true,
changeOrigin: true
}
}
}
};
And I'm trying to make axios call for the script on the adress
https://localhost/test.php
The axios call is
mounted() {
this.$axios.get('api/test.php', {})
.then(response => { console.log(response.data) })
.catch(error => { console.log(error) });
},
But for some reason which i cant figure out I'm still getting
GET http://localhost:8080/api/test.php 404 (Not Found)
Thank you in advance. I'll be happy for any tips.
Your axios call is going to make the request to the API with whatever protocol the webpage is on.
The error shows that you’re making an http call but your webpack config is only spoofing https. Are you visiting https from the page making the request?
Eg https://localhost:8080
You can also try updating your webpack proxy server to look like this
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};
Additional debug steps: curl your Api endpoint from your terminal to see if it’s a protocol issue
you can try
https: true,
proxy: {
'/api': {
target: 'https://localhost/',
ws: true,
changeOrigin: true
}
}
before try, restart by npm run serve to make it sense