I implemented a proxy in my project to handle cross-domain requests, however, the requested address changes when I make a

Unable to Cross Domains

http://localhost:8080/api/login has to be redirected to http://localhost:8080/index.html

proxyTable: {
    '/api': {
        target: 'http://47.106.74.67:8080',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/'
        }
    }
},

Why is this happening? I have attempted to modify all devServer settings in webpack.dev.conf.js, but I cannot see any network-related configurations.

Answer №1

Using the code below will redirect you to when accessing http://localhost:8080/api/login.

proxyTable: {
    '/api': {
        target: 'http://47.106.74.67:8080',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

If you want to forward to , simply remove the pathRewrite configuration. More information can be found in the documentation for vue-webpack-proxy and http-proxy-middleware#options

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

Organizing elements in a javascript array by their attributes using AngularJS

Picture this scenario: a collection of different wines: [ { "name":"wine A", "category":[ "red", "merlot" ] }, { "name":"wine B", "category":[ "white", "chardonnay" ...

Error: Attempting to access property 'PRM_ServerError' on an undefined object is not permitted

After deploying my code to the QA server for testing, I discovered that my image button was not triggering an event. This issue did not occur on the development server. To investigate further, I compared the console output between my local environment and ...

How can I display hardcoded array information as comments along with responses?

Currently, I am facing a challenge in displaying my hardcoded array data as comments with replies. The requirement is to achieve this within a single component file. While I have successfully managed to print the data out as a list, the desired outcome sh ...

A step-by-step guide on simulating a click event on an element in React with the help of jest and react-testing

My component displays the following {list.options && list.options.length > 0 ? ( <div data-testId="MyAlertText" onClick={onAddText}> Add Text </div> ) : null} When testing, I am executing the following it('Ensure Add Text lin ...

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

I am attempting to extract the category_name from my project_category object within the Axios response of my project. This is a singular record, so I do not need to map through an array, but rather access the entire object stored in my state. Here is an ex ...

Using client-side navigation within an integrated Shopify application

Seeking assistance in implementing client-side routing with react-router within a Shopify app that is embedded. Following the guidelines provided by Shopify on this page, but unsure about what needs to be included in a ./Routes file. Attempted to find rela ...

Use npx to reverse the update from React version 18 to version 17

Is there a way to downgrade a project created using "npx create-react-app . --template typescript"? I've tried manually changing dependencies and then running "npm install" as suggested online, but I always encounter errors. How can I adjust the depen ...

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...

JavaScript function unable to access static file for image

I need assistance with dynamically displaying an image (a checkmark or "X") based on a variable. When I insert the image using a script directly in the HTML file, it functions correctly. However, when attempting to set the image from within the createEasyD ...

A guide to implementing the map function on Objects in Stencil

Passing data to a stencil component in index.html <app-root data="{<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d4d7d6f5d2d8d4dcd99bd6dad8">[email protected]</a>, <a href="/cdn-cgi/l/email-pro ...

Utilizing an external JavaScript file for developing applications on Facebook

I am looking to incorporate external JavaScript into my Facebook application development. Specifically, I am hoping to utilize the Ajax tab feature in my application. ...

Obtain or save the created QR code using VueJs and the vue-qrcode plugin

I am utilizing the "vue-qrcode" plugin to create a QR code for my users linking to their public profile, which they can then easily share on platforms such as business cards. My goal is to provide users with the option to download the QR code with one but ...

encountering an issue while working with Selenium on Google Colab

I'm attempting to perform web scraping with selenium in Google Colab and running into some errors The webpage is prompting me to enable JavaScript and disable any ad blockers. I tried enabling JavaScript by adding the following line of code: chrome_o ...

Steps to modify the servletRequest's content length within a filter

My main objective is to secure the POST body requests sent from my web application to my service by encrypting them. This encryption process takes place within a filter in my system. However, I've encountered an issue related to content length. When ...

Stopping React from re-rendering a component when only a specific part of the state changes

Is there a way to prevent unnecessary re-renders in React when only part of the state changes? The issue I'm facing is that whenever I hover over a marker, a popup opens or closes, causing all markers to re-render even though 'myState' rema ...

Search through array elements that are nested deeply

Consider the following scenario: an array is provided as input containing various objects with nested elements. The goal is to filter this array in JavaScript and obtain a new array consisting only of objects where the key "navigation" has a value of true. ...

When making a request through local apache, the POST method is switched to GET

I've been attempting to send a post request using the code below. However, the request is being sent as a GET instead of POST. How can I resolve this issue? $.ajax({ url: 'https://www.exampleurl.com', method: 'POST', h ...

Retrieving JSON data from an API

As a beginner with Jquery JSON and API's, I am trying to work on hitting an API that returns city names in JSON format. I need to display these city names dynamically on my webpage in a list format. Can someone guide me through this process? If you w ...

"Error TS2339: The property specified does not exist within type definition", located on the input field

When a user clicks a specific button, I need an input field to be focused with its text value selected entirely to allow users to replace the entire value while typing. This is the markup for the input field: <input type="text" id="descriptionField" c ...

Employing nvm within the company's network restrictions

Due to the restrictions of the corporate firewall, I am unable to install Node JS via nvm. To work around this, I have decided to utilize Fiddler for proxying and attempted to configure the proxy in nvm with the following command: nvm proxy , where 8888 ...