I have a Vue application on frontend and php Yii2 on backend.
Each route from Vue to Yii2 has approximately time from 3 to 5 seconds.
I found one solution on stackoverflow
Very slow ajax response on yii framework
but it hadn't helped me.
On frontend in my vue.config.js I have proxy settings:
devServer: {
proxy: {
"/api": {
target: "http://localhost"
}
},
Maybe, I have problems from the proxy?
Related
I am getting bellow error
Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://x.xxx.1x.xxx:x000/api/v1/users/slots?type=NIGHT&duration='.
But in localhost site runs smoothly with no issues. Only when i upload the build to online then i am getting this error.
this is how i configured Axios
axios: {
proxy: true
},
axios: {
baseURL: 'http://x.xxx.x1.xxx:x000/api/v1',
},
I'm currently using the Reddit API in my Nuxt app with $fetch. Works great, runs well. Except - loading it up on Safari causes the following errors when deployed to a https domain on Vercel.
https://api.reddit.com/r/funny/hot.json?raw_json=1&limit=50
(Failed to load resource: Origin https://xxxx.com is not allowed by
Access-Control-Allow-Origin)
And.
https://api.reddit.com/r/funny/hot.json?raw_json=1&limit=50 failed due
to access control checks.
I'm looking through CORS issues, but I'm unsure why it would work on MacOS Chrome & Safari, Android Phones and Not iOS Safari & Chrome?
I managed to fix this by creating a proxy in Nuxt Axios as follows:
axios: {
baseUrl: '/api',
proxy: true
},
proxy: {
"/api/": {
target: "https://api.reddit.com/",
pathRewrite: { "^/api/": "" }
}
},
To this day, I'm unsure what on earth was happening. But the proxy seems to make Safari and FireFox happy.
The front end spa is hosted in netlify and backend in heroku. And sending the cookies in response header as shown in the image. But it is not set in the chrome devtools Application or can't be accessed through document.cookie from console.
After long search I found that you cannot set cookie for cross origin.
I am using Vue and Django Rest Framework.
You can use subdomains and set cookie with samesite 'none', secure and set domain to '.example.com'.
When using Vue, you can set cross origin cookies by setting up a proxy in the Vue app.
This works in development where you can edit vue.config.js and add the following:
module.exports = {
devServer: {
proxy: 'http://localhost:3000'
}
}
Another syntax if you want to be more specific would be:
module.exports = {
devServer: {
proxy: {
'^/api': {
target: '<url>',
ws: true,
changeOrigin: true
}
}
}
}
Here you can prepend your proxy url to any req from the front end with /api prepended to it. The proxy will allow cookies to be sent to your frontend while in development.
The Vue proxy documentation goes over it in a bit more detail.
For React users, it is a bit different as you need to add the proxy in the React App package.json like this:
"proxy": "http://localhost:3000"
Here is the documentation for React proxies
I have vue-cli-service running on port 3001, and my backend rails app running on port 3000.
I want all unknown requests to go to the backend rails app. Reading the vue-cli docs, it would seem that the below code should work, but it doesn't.
module.exports = {
devServer: {
disableHostCheck: true,
port: 3001,
public: '0.0.0.0:3001',
overlay: {
warnings: true,
errors: true
},
proxy: 'http://lab.lizardgizzards.com:3000'
},
publicPath: "/",
}
I have a rails route /terms that should render a scaffold page. When I enter http://lab.lizardgizzards.com:3001/terms it doesn't render the rails page, it still shows a vue rendering. Shouldn't it render the rails page? Or does this only work for API requests?
Based on the documentation it would seem that what you've done with the proxy setting should work. However, it didn't work for me either.
The reason for that is here in the code:
https://github.com/vuejs/vue-cli/blob/9ab0fbde1cf87d888aa3d2c3c52176b8de464c59/packages/%40vue/cli-service/lib/util/prepareProxy.js#L81
If an explicit context is set (such as in the example below) it will bail a few lines earlier and everything works fine. Without a context it assumes all requests with accept: text/html should be index.html, presumably for compatibility with history mode routing. Other requests, such as AJAX calls, should be proxied fine.
This did work for me, even for HTML pages.
proxy: {
'/': {
target: 'http://lab.lizardgizzards.com:3000'
}
}
Personally I would put the remote server behind its own path to clearly separate it from the UI. e.g.:
proxy: {
'/api': {
target: 'http://lab.lizardgizzards.com:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
I have a Vue CLI 3 based app which I would like to function as a PWA.
I need it to work in history mode, because the hash intervenes in redirects that I'm doing as part of an OAuth based authentication process.
When the routing is in hash mode, the manages to load fine as PWA. Once I change the mode to 'history', the PWA I installed won't load anymore - I'm getting a white screen instead. I checked the browser version and it still works fine (I configured the fallback in my NGINX server to index.html).
At first I used the default settings provided with vue CLI project and the PWA plugin. After doing some research, I added the following to my vue.config.js:
pwa: {
workboxOptions: {
skipWaiting: true,
navigateFallback: 'index.html'
}
}
and I saw that the following was indeed added to service-worker.js:
workbox.skipWaiting();
...
workbox.routing.registerNavigationRoute("index.html");
but it still didn't help. Even though the app registers successfully on my mobile device's homescreen, it just won't run unless I change the routing back to hash mode.
Does anyone have a clue what I might be missing?
Thanks
I have the same problem, i solved it by adding this in the end of my router.js
{
path: '*', // or '/index.html'
beforeEnter: (to, from, next) => {
next('/')
}
}
Try /index.html instead of index.html.