I just ran the angular-cli setup for a new app. I have Apache running which is serving a local API on port 80 at http://localhost/path/to/api. Of course, ng start serves on port 4200 at http://localhost:4200.
I'm on Windows 10 if that is relevant.
So I researched proxying for Angular-cli and created proxy.config.json:
{
"/api/": { //I've tried "/api", "/api", "/api/*", none worked
"target" : {
"host": "localhost",
"protocol": "http:",
"port": 80
}, //also tried just straight "http://localhost" and "http://localhost:80"
"secure" : false,
"changeOrigin": false,
"logLeverl" : "debug",
"pathRewrite": {
"^/api/clients/public/" : "/path/to/api/clients/public/"
}
}
}
And hooked it up to npm start via package.json. I added the "pathRewrite" to test it on a specific path.
In the console, I get ERROR Object { _body: "<!DOCTYPE html> <html lang="en"> <h…", status: 404, ok: false, statusText: "Not Found", headers: Object, type: 2, url: "http://localhost:4200/path/to/api/clients/public/" } for the call /api/clients/public/
So from the URL I know the proxy config is working (pathRewrite is in effect) but the port is not changed.
I have tried every permutation of the config I've found on the internet and in the documentation.
Does anyone have an idea?
I also tried using a symlink into the Angular application folder but it is redirected to index.html, so if there is a way to exclude that path from the redirect, that works for me too.
Start with a simple version of proxy-conf.json. Here's what I use:
{
"/api": {
"target": "http://localhost:8000",
"secure": false
}
}
and run it with
ng serve --proxy-config proxy-conf.json
This works for me when I use the Node.js server (runs on port 8000), and it also works fine with Java Spring Boot (the Tomcat server). My servers just return data. Why do you need path rewrite? Using proxy-conf.json is for dev environment. When you'll deploy the app bundles under Apache, you won't need this proxy.
Related
I'm trying to set up to run Nuxt 3 with HTTPS for localhost. I've looked at other guides and questions that were already asked online, but they all seem to be using older versions of Nuxt and for some reason, that way does not work anymore. For example, I've tried using this link as a reference on how to set up my nuxt.config.ts file, however, it's not working out for me.
When using the server property, I'm getting the error "server does not exist in type NuxtConfig", however, devServer seems to not give me any errors at least (still not working). Here's my
nuxt.config.file
import { fileURLToPath } from "node:url"
export default defineNuxtConfig({
css: ["~/assets/global.scss"],
experimental: {
reactivityTransform: true,
},
app: {
head: {
htmlAttrs: {
lang: "en",
},
},
},
devServer: {
https: {
key: fileURLToPath(new URL("~/certs/localhost-key.pem", import.meta.url)),
cert: fileURLToPath(new URL("~/certs/localhost.pem", import.meta.url)),
},
},
})
SSL certificate is created and self-signed using mkcert.
After I generate the SSL certificate and install everything and try to access https://localhost:3000, I get the error "SSL_ERROR_RX_RECORD_TOO_LONG".
I'd really appreciate if someone could help me out with this. I've never done this before so not really sure what I am doing and it's taking a while already to solve.
It seems I managed to find a way to set up HTTPS on localhost in the end.
Here's how I did it:
First I followed this short guide to set up & self-sign the SSL certificate. I also changed nuxt dev from the package.json file to the following nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem.
However, this gave me a 500 fetch failed error. This was solved by following this thread, which basically stated that you need to enable the NODE_TLS_REJECT_UNAUTHORIZED=0 variable.
Now everything seems to be working perfectly!
maybe somebody use cypress for testing e2e flows together with backend API calls without some mocks.
I have a trouble right now, I want to use my local API from simple Laravel server like
http://127.0.0.1:8000, but all my XHR request aborted when I run tests. After some investigations I understood that if I change request baseUrl to https://example.com then requests works fine.
Example of XHR aborting
I already set chromeWebSecurity to false.
Cypress version: 4.0.2
cypress.json
{
"viewportWidth": 1920,
"viewportHeight": 1000,
"baseUrl": "http://localhost:4200",
"watchForFileChanges": false,
"integrationFolder": "cypress/build/cypress/integration",
"chromeWebSecurity": false,
"blacklistHosts": [],
"env": {
"host": "http://localhost:4200",
"baseUrl": "http://127.0.0.1:8000/api"
}
}
I have created a PWA using vue js 2.0 and framework7 and also use Webpack for bundling. I want to use browser-sync to share my project.
I used this config in my webpack.confg file :
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost,
port: 3000,
server: { baseDir: ['src'] }
}),
In src/ I have my basic files like index.html, app.vue, app.js.
After using npm run dev command I see this result :
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://192.168.1.118::3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: src
After this, localhost:3000 open in my browser and say browsersync: connected but it have showed me a blank page.
Also after I enter website path (http://localhost:3000/en/#!/login) in browser, it showed me Cannot Get /en Error. What is the problem?
Any help will greatly appreciated.
Based on your comment, looks like you are also using webpack-dev-server. In that case you can proxy to it:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
// ...
devServer: {
port: 3100
}
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
I have configured devserver in vue-config.js before like this:
devServer: {
proxy: {
"/api/*": {
target: "http://localhost:3001",
secure: false
}
}
}
In nuxt-SPA this dont work. My front is still sending API-calls to same origin localhost:3000. How to configure API-calls to different port?
Duplicate of
How to use webpack dev proxy with Nuxt
https://github.com/nuxt/nuxt.js/issues/762
Due to its unversal app nature Nuxts doe not have webpack proxy.
Simpliest one to implement is here - https://github.com/nuxt-community/proxy-module
I recently upgraded my VUE CLI to 3.5.5
After running the standard install, I noticed CORS and websocket errors being thrown in the browser ...Connection closed before receiving a handshake response. The errors are thrown in both Firefox and Chrome.
I am guessing this has something to do with the webpack devserver and CORS but its a guess because I know nearly nothing about webpack.
I added a vue.config.js and tried various configs for the webpack devServer but none have worked.
Can anyone illuminate this issue? - it must be very common. Thanks
So the solution i found was to create a vue.config.js file at the root level of the project and use this webpack config:
module.exports = {
devServer: {
host: "0.0.0.0",
public: "0.0.0.0:8080",
disableHostCheck: true,
proxy: {
"/app": {
target: "http://localhost:8081",
changeOrigin: true,
ws: true
}
}
}
};