Failed to proxy the request to host error while running vuejs from asp net cor

Introduction

When running a Vue.js from an ASP.NET Core project, you may encounter the “Failed to proxy the request to host” error. This error occurs when the ASP.NET Core project is unable to proxy the request to the Vue.js application. In this article, we will explore the possible solutions to resolve this error.

Solution 1: Configure Proxy in ASP.NET Core

The first solution involves the proxy in the ASP.NET Core project. To do this, open the Startup.cs file and locate the ConfigureServices method. Add the following code to configure the proxy:


services.AddReverseProxy()
    .LoadFromConfig(Configuration.GetSection("ReverseProxy"));

Next, locate the Configure method in the same file and add the following code to configure the proxy :


app.UseRouting();

app.UseEndpoints( =>
{
    endpoints.MapReverseProxy();
});

Make sure to replace "ReverseProxy" with the appropriate configuration name in your project.

Solution 2: Update Vue.js Configuration

If the first solution doesn't resolve the error, you can try updating the Vue.js configuration. Open the vue.config.js file in your Vue.js project and add the following code:


module.exports = {
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://localhost:5000',
                ws: true,
                changeOrigin: true
            }
        }
    }
};

This configuration sets up a proxy for requests starting with /api to be to the ASP.NET Core application running on http://localhost:5000. Adjust the target URL according to your ASP.NET Core application's URL.

Solution 3: Check CORS Configuration

If the error still persists, you check the CORS (- Resource Sharing) configuration in your ASP.NET Core project. Ensure that the necessary CORS policies are set up to allow requests from the Vue.js application. You can add the following code to the ConfigureServices method in the Startup.cs file:


services.AddCors(options =>
{
    options.AddPolicy("VueCorsPolicy",
        builder =>
        {
            builder.WithOrigins("http://localhost:8080")
                .AllowAnyHeader()
                .AllowAnyMethod();
        });
});

Make sure to replace "http://localhost:8080" with the appropriate URL of your Vue.js application.

Conclusion

By following the solutions mentioned above, you should be able to resolve the “Failed to proxy the request to host” error while running Vue.js from an ASP.NET Core project. Configuring the proxy in ASP.NET Core, updating the Vue.js configuration, and checking the CORS configuration can help establish a successful between the two applications.

Rate this post

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents