A guide on accessing header response information in Vue.js

Currently, I am operating on my localhost and have submitted a form to a remote URL. The process unfolds in the following sequence:

  1. Submission of a form from localhost
  2. Being redirected to a remote URL
  3. Sending a response back from the Remote URL to localhost

I have the ability to fetch the localhost header response.

mounted(){
     window.axios.get('http://localhost:8080')
        .then(function (response) {
          console.log(response.headers)
        })
}

The issue arises when the response data turns out to be incorrect as it reflects the data within the localhost header. My objective is to retrieve the header response from the remote web URL. Thus, I modified the URL to window.axios.post('remote_url')

However, encountering a CORS privacy error poses a problem.

https://i.sstatic.net/Xnd9k.png

I aim to extract the order_id. Is there any feasible approach to achieve this?

Answer №1

To enable CORs on your remote server, refer to this guide here

For additional information, make sure to read through this insightful Answer

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

I'm having trouble getting my application to output to the console. What could be the issue?

In my cr-route.js file, I have a function that ensures the user is authenticated before displaying their name. module.exports = function (app, passport) { // ===================================== // HOME PAGE (with login links) ======== // == ...

Discovering whether an ID exists within a variable containing HTML code

I am currently attempting to determine if the ID is included in a variable containing HTML content. The ID name is being added to a DIV element through dynamic variables. strHTML = "<div id='"+var1+var2+"'>" Now, I want to verify if a sp ...

Issue with Axios Response Interceptor on Vuejs causing failure to pass response data

axios.interceptors.response.use( (response) => { return response }, async (error) => { const instance = axios.create({ baseURL: 'myrestbase', timeout: 1000, headers: { 'Authorization': 'Bearer T ...

Filtering records in Sails.js through route parameters

As a newcomer to Sails.js, I'm delving into its capabilities and workings. My scenario involves three interconnected models through associations: Series.js -> Season.js -> and Episode.js. Series.js module.exports = { attributes: { /* ...

Changing the color of the label in Element-ui table

I'm trying to make all the text in an element-ui table black. I was successful in changing the color for individual rows using the style attribute like this: <el-table-column width="400" label="Product Name" prop="product.n ...

Having trouble retrieving information using JSON from openweather.com

Currently, I am facing an issue while attempting to retrieve weather information from the openweather.com API using geo-location (latitude and longitude) data. Despite my efforts, I cannot seem to figure out why the data is not being retrieved successfully ...

How can we dynamically showcase a table column/row containing data with varying sizes of nested arrays?

I am struggling to showcase the data retrieved from firestore on a table using Vue.js and Element UI. Most solutions I found are for displaying a fixed amount of data, but my case involves an uneven number of data entries. Here is the structure of my data ...

Best practices for effectively dismantling a Paper.js Scope

In my web project, I am utilizing multiple Paper.js canvases by creating a new scope for each of them. Due to the AJAX-driven nature of the site, I need to get rid of unnecessary instances when switching between subpages. Unfortunately, there is no built-i ...

Unable to access the uploaded file on the server

Scenario : When a user uploads an image and clicks on the "save" button, I successfully save the image on the server with 777 permission granted to the folder... Problem : However, when I try to open the image, it does not display properly: Image url H ...

Maintain the proportion of the browser window when reducing its size

<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <img src="spacer--1200x800.png" width="1200" height="800" /> </body> </html> This section contains CSS ...

Ajax fails to transmit data to PHP script

Having encountered an issue with my script that prevents sending data from AJAX to a PHP file, I decided to debug it by logging the form data before running it through the AJAX function. The data obtained was as follows: Form: name=jim&email=info%40te ...

Using jQuery Mobile: Implementing listview data-filter for multiple data sets

I'm working on a JQM page with two data-role="listview" elements. Both of them are using the same data set, but one listview displays only text while the other includes icons as well. My goal is to implement the data-filter="true" option for both lis ...

How do you populate a dropdownlistfor in ASP.NET MVC after a form

My issue is that <form> @Html.DropDownListFor(x => x.City, provinces, "--Select City--", new { @class = "dropdownList" }) @Html.DropDownListFor(x => x.district, Enumerable.Empty<SelectListItem>(), "--Select district--") < ...

Learn the process of passing props from Laravel to Vue in a seamless manner

Recently getting started with Vue. I have been trying to pass props from Laravel to Vue, but unfortunately encountered an error. Any help in finding my mistake is highly appreciated. https://i.sstatic.net/Ma6sr.png https://i.sstatic.net/8HCz9.png <job ...

Can you explain the process that takes place when require("http").Server() is called with an Express application passed in as a parameter?

As I was exploring the Socket.io Chat Demo found at this link: http://socket.io/get-started/chat/, I came across their require statements which left me feeling confused. var app = require('express')(); var http = require('http').Server ...

Updating HTML Pages with Dynamic Content

Dealing with a massive project consisting of 50,000 pages (20,000 aspx forms, 10,000 asp forms, and 10,000 html pages) can be overwhelming. With only 2 days to complete the task of adding content after the body tag on all pages, I am seeking advice on ho ...

Uploading files with additional information in Vue.js

Previously, I utilized Vue Dropzone for file uploads which was quite straightforward. However, I have a query regarding a functionality that I am unsure is feasible. Here's the scenario: Users drag files to the dropzone area and they are added to the ...

What is the best way to implement auto-saving functionality for multiple form fields in a React application?

Whenever I make changes to the first and second columns of an item in a text field, the onBlur event triggers an auto-save. This results in the entire row being reloaded due to the update caused by the first column's save. Is there a way to prevent t ...

Deploying a Vue application and implementing changes without the need for a project file

After a developer created a web front-end and deployed it on a server, I realized that I don't have access to the original Vue files used to develop the application. This has left me unsure about how Vue works and whether deployment involves compiling ...

The callback for closing the $uibModal with a value will consistently result in undefined

Using ng-click="$widget.addItem()" in my template triggers a $uibModal. Everything is functioning properly - opening, closing, etc. The issue arises when trying to get the callback value from $modal.close($value). The function itself works correctly, the ...