I want to make requests to api on another website.
I know that in Angular you can have a file proxy.conf.json with something like this
{
"/api": {
"target": "website.com",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
Is there a way to do this in vue if I don't use vue-cli?
Ended up using express server with webpack dev middleware and express-http-proxy
Related
I am running an angular build using Bazel, and need a reverse proxy to change the host and port of my backend. Normally I would create a serve-command in angular.json, which implements the builder #angular-devkit/build-angular:dev-server with a proxy setup:
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "MyPackage:build",
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "MyPackage:build:production"
}
}
}
But since I'm using Bazel, I'm using another builder, the #bazel/angular:build. Unfortunately this builder does not support my proxy configuration, where I would use something like:
{
"/apps": {
"target": "https://my.server:8080",
"secure": true,
"changeOrigin": true
}
}
Is there an alternative to this?
You have probably already seen this page, but I'll link it for reference:
https://bazelbuild.github.io/rules_nodejs/examples#angular
In the "Architect" approach, you build with Bazel but run the standard Angular builders. So if you just want a quick way to keep the functionality, but plug the project into Bazel, I would recommend it.
The #bazel/angular:build builder is part of the "Google" approach described on that page. While it's fast and more "Bazel-native" it also uses a different toolchain. Most notably, no webpack.
The linked example uses concatjs_devserver:
https://github.com/bazelbuild/rules_nodejs/blob/stable/examples/angular/src/BUILD.bazel#L111
which sadly doesn't have a proxy feature.
You can either fall back to the "Architect" approach or write your own Bazel rule that starts a different devserver. Yet another approach would be to just run some reverse proxy in front of both the devserver and your backend server.
I have a Nuxt project. Everything is OK when I generate a static page.
However, I need to send a POST request to the other server.
I tried to use both a proxy in nuxt.config.js and just direct query, but after deploy to the ngnix eventually, nothing works.
Please help.
UPDATE. Steps to reproduce.
Create Nuxt App including axios and proxy
Configure your proxy for other webservice:
proxy: {
'/api': {
target: 'http://example.com:9000',
pathRewrite: {
'^/api': '/',
},
},
changeOrigin: true,
},
call this service somewhere in the code:
const result = await this.$axios.post('/api/email/subscribe', {email: email})
run "yarn dev" and test the service. It works locally properly.
run 'nuxt generate' and deploy the static code hosting service, for example, hosting.com
run your page which calls the above-mentioned service.
As a result, instead of making POST call to the hosting.com/api/email/subscribe, it calls localhost:3000/api/email/subscribe.
Be sure to install the nuxt versions of axios and proxy in your project #nuxt/axios and #nuxtjs/proxy
after that in your nuxt.config.js add axios as module plus this options for axios and proxy:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
//more modules if you need
],
/*
** Axios module configuration
*/
axios: {
proxy: true,
// See https://github.com/nuxt-community/axios-module#options
},
proxy: {
'/api/': {
target: process.env.AXIOS_SERVER, // I use .env files for the variables
pathRewrite: { '^/api/': '' }, //this should be your bug
},
},
now you can use axios in any part of the code like this
const result = await this.$axios.post('/api/email/subscribe', {email: email})
it will internally resolve to AXIOS_SERVER/email/subscribe without cause cors issues.
EXTRA: test enviroments in local using multiples .env files
you can configure .env for dev and .env.prod for production, after that in local you can use yarn build && yarn start for test your app with your production enviroment. You only need add this at the top of your nuxt.config.js file
const fs = require('fs')
const path = require('path')
if (process.env.NODE_ENV === 'production' && fs.existsSync('.env.prod')) {
require('dotenv').config({ path: path.join(__dirname, `.env.prod`) })
} else {
require('dotenv').config()
}
By definition on the Nuxt docs page what nuxt generate does is: Build the application and generate every route as a HTML file (used for static hosting).
Therefore, using proxy is out of question here. Take note that you path is not even being rewritten.
And probably the result you're looking for is not hosting.com/api/email/subscribe (wit /api), but hosting.com/email/subscribe.
Nevertheless, if you use nginx then I don't think you should use Nuxt's proxy option. Nginx is built just for that so point your API calls there and in nginx config file just declare where it should point further.
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 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 have a .Net Web API service running with windows authentication enabled. I've a separate UI application for which webpack is setup. I'm trying to setup webpack proxy to access my service. Here is my current configuration
"proxy": {
"/api/*": {
"target": "http://localhost:50643",
}
}
I'm getting a 401 (Unauthorized) error now. How do I setup webpack proxy to enable authentication.
You can provide auth prop:
"proxy": {
"/api/*": {
"target": "http://localhost:50643",
"auth": "username:password"
}
}