Channeling requests from webpack dev server to .net MVC website

I am working on incorporating Vue into my .net MVC project. After installing Vue using the CLI, I included the following vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://mvcsite.local',
        changeOrigin: true
      }
    },
    disableHostCheck: true
  },
  runtimeCompiler: true
};

The proxy functionality is working correctly, however, when a request is made to the root http://localhost:8080 (where the development server runs), it serves the index.html generated by Vue instead of properly proxying the request to the root of http://mvcsite.local. How can I ensure that particular request is proxied as intended?

javascriptvue.jswebpackwebpack-dev-server

Answer №1

After reviewing your comment, it appears that there is a known issue on GitHub related to this problem with no current solution. In my experience using ASP.NET MVC 4, I was able to resolve the issue by implementing a workaround. In my development environment, I relocated the root directory to /Home. It's important to ensure that your server backend can accommodate this change, which is usually a minor obstacle. Below is an example of my working vue.config.js configuration for @vue/cli 3:

module.exports = {

    publicPath: "/Home",

    devServer: {
        publicPath: "/Home",
        proxy:
        {
            '^/Home/*': {
                target: 'http://localhost:50353/',
                ws: true,
                changeOrigin: true
            }
    
        },
    
    }

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for patiently waiting for an axios request to finish

Within my vuejs application, I am faced with the challenge of initializing an object using data retrieved from an ajax call: let settings = {} api.readConfig().then((config) => { settings = { userStore: new Oidc.WebStorageStateStore(), author ...

javascriptajaxvue.jsaxios

Ways to maneuver the vehicle by using the left or right key inputs

I am a beginner with canvas and game development. I am currently working on a project where a car moves in a straight line, but I want to add functionality for the car to turn anti-clockwise when the left key is pressed, and clockwise when the right key is ...

javascripthtmlcanvas

Do you have any queries regarding JavaScript logical operators?

I'm struggling with understanding how the && and || operators work in my code. I created a small program to help myself, but it's just not clicking for me. The idea is that when you click a button, the startGame() function would be triggered. va ...

javascriptlogical-operators

The error message states: "An uncaught TypeError has occurred - the object does not possess the 'jqzoom' method."

I am encountering a browser console error while working on a project involving a magento website. Specifically, I need to implement the jqzoom feature on the product view page. Here's what I have done so far: Added jQuery Included the jqzoom librar ...

javascriptjquerymagentojqzoom

Utilizing AngularJS: Executing directives manually

As a newcomer to AngularJS, I am facing a challenge that requires creating a 3-step workflow: The initial step involves calling a web service that provides a list of strings like ["apple", "banana", "orange"]. Upon receiving this response, I must encap ...

javascriptangularjs

Another approach to utilize JavaScript for populating content into a <div> container?

Upon loading the page, I aim to display a message in the <div> element. Below is the HTML and JavaScript code I have implemented: <body onload="printMsg()"> <div id="write"></div> </body> function printMsg() { var no ...

javascripthtml

What is the best way to import API Endpoints from various directories in an Express Server?

I have been using a script to load my API endpoints like this: readdirSync('./routes/api').map((r) => app.use( `/api/v1/${r.split('.')[0]}`, require(`./routes/api/${r.split('.')[0]}`) ) ); This script reads eve ...

javascriptnode.jsexpressmongooseendpoint

Wordpress functionality for filtering Ajax posts using radio buttons

I am in the process of creating an Ajax post filter system using radio buttons to allow users to filter through multiple categories. Below is the code I have implemented: Front-end form: <form id="filter"> <?php if( ...

javascriptphpjqueryajaxwordpress

Is there a method to achieve greater accuracy when dividing a large number?

My requirement involves operating on Big Numbers, and I need the results to maintain precision, as demonstrated below: const BN = require('bn.js'); var a = 11060622312717714974 var b = 1570481433500000000000; console.log(a/b); //0.00704282271460 ...

javascriptnpmbignumber.js

What is the process for generating a watermark directive in angularjs?

My application utilizes a jQuery script for watermarking textboxes. I created a directive to easily apply this watermark to input elements, but it's not functioning as expected. While debugging, I can see the watermark being added, but once the UI fin ...

javascriptjqueryangularjs

Utilizing the ng-init directive to initialize code based on a JSON object

I am attempting to connect the value of ng-init to an input from a JSON object. However, I am receiving a "Syntax Error: Token" message. Can someone help me identify where I am making a mistake? $scope.obj = { init: 'obj.value = obj.value || 20&apos ...

javascriptangularjs

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

I came across this snippet of code while working with ng-repeat: <div ng-show="parameter == 'MyTESTtext'">{{parameter}}</div> Here, parameter represents a string variable in the $scope... I started exploring if it was possible to c ...

javascriptangularjs

Ensure there is a sufficient gap between the top and bottom icons within the Material-UI Drawer

I'm having difficulty articulating this, but I'd like to add two different sets of icons to the Drawer component. Set 1 should be displayed at the top in a standard column format, similar to the examples provided by them. Set 2 should go at the b ...

javascriptreactjsmaterial-ui

using regular expressions to find unclosed font tags that match on a single line

Even though regex is not typically recommended for parsing HTML, in this case we are dealing with a single line string input to a function. For example: <font color = "#ff0000"> hello </font>. I want the regex pattern to match only if the tag ...

javascriptpythonhtmlregexfonts

Issue: [unresolved] Provider not recognized: $resourseProvider <- $resourse <- Phone Angular factory

I'm encountering an issue with injecting a resource. Error: [$injector:unpr] Unknown provider: $resourseProvider <- $resourse <- Phone Here is my code: index.html <script src="bower_components/angular/angular.js"></script> < ...

javascriptangularjs

Can you explain the distinctions among <Div>, <StyledDiv>, and <Box sx={...}> within the MUI framework?

When exploring the MUI documentation, I came across a table of benchmark cases that can be found here. However, the differences between the various cases are not clear to me. Can someone please explain these variances with real examples for the following: ...

javascriptcssreactjsmaterial-ui

Troubleshooting: Issue with Dependency Injection functionality in Angular 2 starter project

I’ve encountered a strange error whenever I attempt to inject any dependency TypeError: Cannot set property 'stack' of undefined at NoProviderError.set [as stack] (errors.js:64) at assignAll (zone.js:704) at NoProviderError.ZoneAwareError (zon ...

javascriptangularjsangulartypescript

The Serverless Function appears to have encountered a critical error and has

Currently, I am in the process of deploying a backend Express app on Vercel. The server is primarily focused on handling a mailing API using Nodemailer. Below is my package.json: Here is my server.js file: import express from "express"; import ...

javascriptnode.jsexpressecmascript-6vercel

Encountering an issue while trying to create a user in Firebase

I am currently following a tutorial on Vue.js from Savvy Apps, which utilizes Firebase with Firestore. As the tutorial mentions that Firestore is still in Beta, I anticipate potential changes - and it seems like that might be happening in this case. While ...

javascriptfirebasevue.jsfirebase-authenticationgoogle-cloud-firestore

The three.js library is throwing an error because it is unable to access the 'geometry' property of an

function CreateNewSphere(x, z) { var sphereGeometry = new THREE.SphereBufferGeometry(10 * factor, 32, 32); var sphereMaterial = new THREE.MeshBasicMaterial({ color: SphereColor, wireframe: false }); var sphere = new THRE ...

javascripthtmlthree.js