I have a devserver proxy setup in VueJS that allows me to talk to my website for APIS and get around CORS problems when working in my local devbuild.
However, with this setup, if the requested file exists locally, the local devserver proxy doesn't get the file from my website (which I want it to do for PHP files), it instead tries to load the local PHP file via the Vue devserver.
my vue.config.js file looks like this:
module.exports = {
"transpileDependencies": [
"vuetify"
],
devServer: {
proxy: 'https://www.example.com',
}
}
Is it possible to set up exclusions for specific files, or specific file types (ie PHP files)?
Related
last week I posted the following question which I haven't been able to solve yet.
So my original problem is the following: I have a vue application which is running on my PC and can be accessed there via :8080 or localhost:8080. However I can't access this page from my phone which is in the same wifi. I also added an inbound rule for the port already (I am using windows 10 btw).
I also have a flask server which hade a similar problem which could be solved by setting the host to 0.0.0.0 and adding the firewall rule.
I searched for hour and hours and most answers that are related suggested using options in the command like e.g "npm run serve --host=0.0.0.0 --disable-host-check --useLocalIp --content-base ." or to put something similar into my package.json or add an vue.config.js. There are several answers, some people use 0.0.0.0 for the host value, some their hardcoded IP, some use some options, some not. I tried so many combinations.
As the vue-cli stuff seems to build onto webpack servers I tried different options from there. I also found one comment mentioning vue which can be found here.
When I try to use that I however get the error
ValidationError: webpack dev server Invalid Options
options should NOT have additional properities
options should NOT have additional properities
options should NOT have additional properities
options should NOT have additional properities
My vue.config looks like the following right now
module.exports = {
devServer: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
},
}
Something I tried out in the config before was e.g.
module.exports = {
devServer: {
host: '0.0.0.0',
port: 8080,
public: '0.0.0.0:8080',
hot: true,
disableHostCheck: true,
contentBase: '.',
},
};
I am glad about any tip on how to finally access this page via my phone or any other device.
I am trying to serve Vue application over HTTPS instead of HTTP.
I have tried to add --https flag to webpack-dev-server and add https: true in build/webpack.dev.cong.js but when I try to open the app in the browser it crashes with the following error:
[DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
internal/buffer.js:945
class FastBuffer extends Uint8Array {}
^
RangeError: Invalid typed array length: -4095
at new Uint8Array (<anonymous>)
Is there something that I missed or what is the solution for this?
And if the HTTPS properly configured to webpack devServer, after building the project it would work the same when served with web server like nginx or I have to add some reverse proxying?
If you want to do this on your local machine, then you are going to want to use NGINX to serve up the HTTPS-traffic and use it to reverse proxy to whatever port on your local machine that you mount your webpack-dev-server. There might be a way to get Webpack to do this, but it wasn't designed to do this.
I am trying to run a vue-cli project using https.
As per the instructions here How to run Vue.js dev serve with https?
I've added the https setting to the vue.config.js as per below:
module.exports = {
devServer: {
https: true
}
}
When I run the app it correctly runs as https://localhost:8080 however Chrome throws an ERR_CERT_AUTHORITY_INVALID error.
It appears I need to setup an SSL certificate in Windows and set some configuration in vue.config.js. Does anyone know how to do this? Note, this question applies specifically to Windows.
This happened to me when I was building multiple applications that were sometimes sharing the same port. I fixed it by switching to a different port:
module.exports = {
devServer: {
port: 8081
}
}
Update
I added json in MIME type in IIS and it worked in Chrome but in IE, it is going to "http://localhost:8080/Advisoryportal" which is fine but immediately redirected to "http://localhost:8080/" which is giving HTTP Error 404.3 - Not Found and going to http://localhost:8080/Default.asp.
Can some one please help in this?
===========================================================================
I have a small application i am working on and I can host it on IIS but en.json is not getting loaded and hence I am not able to support multilingual text.I am getting 404 errro.I tried many solutions which I can find over internet.
"http://localhost:8080/Advisoryportal/assets/i18n/en.json", ok: false,
WebPackVersion:webpack#4.8.3
Package.json
"assets": [
"src/favicon.ico",
"src/assets/",
"src/assets/i18n",
"src/web.config",
"src/loan-insurance-overview",
"src/assets/i18n/en.json"
],
Module.ts
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient,"./assets/i18n/", ".json");
}
Issue was fixed after adding application/json MIME type in IIS
I am trying to do a relatively simple set up with:
An Apache server with a virtual host for the HTML.
Webpack and the Webpack Dev Server for asset reloading and generation.
To accomplish this, the Webpack Dev Server proxies the other server to pass through requests that it doesn't know how to handle.
Using a basic python server (which works):
Start the python webserver on http://localhost:5000.
Run npm start.
Webpack Dev Server starts and proxies the python server using http://localhost:9090.
Visit http://localhost:9090 and see HTML result of python server plus Webpack assets.
Using Apache server:
Start the Apache server.
Run npm start.
Webpack dev server starts and proxies the Apache server using http://localhost:9090.
Visit localhost:9090 the browser automatically redirects to http://localhost and displays "It works!".
If I separately visit http://vhost.name in the browser I see the correct HTML. My environment is the default Apache Server version: Apache/2.4.16 (Unix) on Mac OSX El Capitan.
package.json
"scripts": {
"test": "node server.js",
"start": "npm run start-dev-server",
"start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 --progress --colors",
"build": "webpack"
},
webpack.config.js
/*global require module __dirname*/
var webpack = require('webpack');
module.exports = {
entry: {
app: [
'webpack-dev-server/client?http://localhost:9090',
'webpack/hot/only-dev-server',
'./src/app.js'
]
},
output: {
path: __dirname + '/dist',
filename: '[name]_bundle.js',
publicPath: 'http://localhost:9090/dist'
},
devServer: {
historyApiFallback: true,
proxy: {
// Python server: works as expected at localhost:9090
// '*': 'http://localhost:5000'
// Apache virtual host: redirects to localhost instead of
// serving localhost:9090
'*': 'http://vhost.name'
}
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
httpd-vhosts.conf
<VirtualHost vhost.name:80>
DocumentRoot "/Path/To/vhost.name"
ServerName vhost.name
<Directory "/Path/To/vhost.name">
Options FollowSymLinks Indexes MultiViews
AllowOverride All
# OSX 10.10 / Apache 2.4
Require all granted
</Directory>
</VirtualHost>
hosts
127.0.0.1 localhost
127.0.0.1 vhost.name
Wordpress uses canonical URLs to help normalize URLs for content from different sources:
[Y]ou can’t control who links to you, and third parties can make errors when typing or copy-pasting your URLs. This canonical URL degeneration has a way of propogating. That is, Site A links to your site using a non-canonical URL. Then Site B see’s Site A’s link, and copy-pastes it into their blog. If you allow a non-canonical URL to stay in the address bar, people will use it. That usage is detrimental to your search engine ranking, and damages the web of links that makes up the Web. By redirecting to the canonical URL, we can help stop these errors from propagating, and at least generate 301 redirects for the errors that people may make when linking to your blog.
This rewriting is what strips the Webpack-dev-server port number when attempting to proxy. The solution is to add in your theme/functions.php:
remove_filter('template_redirect', 'redirect_canonical');
We obviously don't want this running on the live site, so add a variable to the wp_config.php to set depending on environment:
wp-config.php
// Toggle to disable canonical URLs to allow port numbers.
// Required for Webpack-dev-server proxying.
define('DISABLE_CANONICAL', 'Y', true);
yourtheme/functions.php
// Hack for Webpack dev server
if (DISABLE_CANONICAL == 'Y') {
remove_filter('template_redirect', 'redirect_canonical');
}
I have experienced issues with the browser "caching" the previous URL redirect, so when you make a change it may not appear immediately. Try opening the URL in incognito mode, using a different browser, or restarting the Webpack and Apache servers.