What are the steps to resolve the CORS policy problem when making a GET request?

Can someone assist me in resolving the CORS policy issue I am facing? This problem occurs when I attempt to make a GET request to the applications endpoint, and it seems to only happen when accessing from http://localhost:8080/ - the request works fine in production.

Here is my vue.config.js file:

module.exports = {
    devServer: {
        proxy: 'https://spinstatus.zenoss.io/'
    }
}

Request Method:

const grabApps = async () => {
  const res = await axios({
    method: 'get',
    url: `${spinnakerURL}/gate/applications`,
    withCredentials: false,
    crossdomain: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  });
  return res.data || []
}

View Error

View Headers from Localhost Request

View Headers from Production Request

Answer №1

To modify the devServer setup in your vue.config.js file, follow these steps:

module.exports = {
  devServer:
  {
    proxy:
    {
      '/gate':
      {
        target: 'https://customdomain.com',
        changeOrigin: true,
        onProxyReq: (proxyReq, req, res, options) =>
        {
          proxyReq.setHeader('Origin', 'https://customdomain.com');
        }
      }
    }
  }
};

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

Error: Compilation was unsuccessful due to module not found. Unable to resolve in ReactJS

As I was wrapping up this task, an unexpected error popped up: Module not found: Can't resolve './components/Post' in ./src/pages/index.js I've tried everything to troubleshoot it but no luck. Here's a rundown of my code snippets ...

Output a variable that is generated from invoking an asynchronous function

I'm currently in the process of developing an application that is going to leverage the capabilities of a SOAP server through the use of the https://github.com/vpulim/node-soap module. One of the main challenges I am facing is how to efficiently crea ...

Challenges with the Placement of Buttons

I am facing an issue with the code below: document.addEventListener("DOMContentLoaded", function(event) { // Select all the read more buttons and hidden contents const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenConten ...

Troubleshooting my vue select to show the accurate option

I am facing an issue with my Vue page where the correct category option is not being selected on page load based on the product's category id. I am unsure of what mistake I may have made in my code. Below is the code snippet: <template> ...

Adjust the child content within a React component based on the element's width, rather than the overall window size, by implementing dynamic resizing without fixed breakpoints

I am working with a react component that displays a div containing menu items which are aligned horizontally using inline-block. The menu items have text labels "Toy Store", "Configure your Toy", and "About Us". My challenge is to dynamically change the ...

I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have check ...

Having trouble getting Vue 3 integration to work properly in Laravel 9 tutorial

Having previously worked on projects using Laravel, I decided to try integrating Vue.js for the front end of my latest project. In search of tutorials on how to seamlessly blend Vue.js with Laravel, I experimented with multiple guides. However, I will focu ...

Retrieving complete credit card information with the help of JavaScript

I've been grappling with extracting credit card data from a Desko Keyboard, and while I managed to do so, the challenge lies in the fact that each time I swipe, the card data comes in a different pattern. Here is my JavaScript code: var fs = require ...

How to utilize local functions within a ko.computed expression

Why isn't this line of code working? I'm using durandal/knockout and my structure is like this define(function () { var vm = function() { compute: ko.computed(function() { return _compute(1); // encountering errors }); ...

Issue with Flat-UI: Navigation bar is not collapsing correctly. Need help to resolve this problem

I am currently utilizing the most recent Twitter Bootstrap along with Flat UI. I have been trying to create a basic navbar that collapses when the screen size is reduced. How can I resolve this issue? This is how it currently appears: My navigation items ...

Retrieve the Content-Type header response from the XHR request

My intention is to check the header content type and see if it is text/html or text/xml. If it is text/html, then it indicates an error that I need to address before moving forward. ...

Utilizing JavaScript variables to generate a custom pie chart on Google

Greetings! I must admit that I am a novice, especially when it comes to JavaScript. My background is mainly in PHP. Recently, I came across a fantastic pie chart created by Google https://developers.google.com/chart/interactive/docs/gallery/piechart I a ...

In MUI v5, the Autocomplete default value is not set

When I try to use the defaultValue prop in the Autocomplete component of MUI v5, the value always ends up being undefined. This is a snippet from my code: const vehicles = [ { name: "Toyota", model: "Camry" }, { name: "Ford&qu ...

Guide on hiding the sidebar in mobile view and enabling toggling on click for both mobile and other devices with the use of vue.js and bootstrap4

I need assistance with transitioning my code from pure Bootstrap4 and JavaScript to Vue.js. When I tried implementing it in mobile view, the sidebar is not showing. Below is the code snippet that I am trying to change for Vue.js, but I keep encountering an ...

Display a text field upon clicking on a specific link

I am trying to create a text field that appears when a link is clicked, but I haven't been able to get it right yet. Here is what I have attempted: <span id="location_field_index"> <a href="javascript:void(0)" onclick="innerHTML=\"< ...

Upcoming examination on SEO using React testing library

Currently, I am in the process of testing out my SEO component which has the following structure: export const Seo: React.FC<Props> = ({ seo, title, excerpt, heroImage }) => { const description = seo?.description || excerpt const pageTitle = s ...

Is there a way to dynamically calculate the total of a column when a new row is added using Javascript?

I am new to both javascript and cakephp. I successfully implemented a feature that allows me to add a new row using javascript, but now I am looking to calculate the total sum of the "amount" column whenever I input a value in the amount field. Below is th ...

Methods for Addressing Absent SocketIO Session Data Within an Express Route Handler

My goal is to establish communication between Express and SocketIO on a nodejs server, allowing them to share session data. After conducting thorough research online, I discovered a potential solution at https://socket.io/docs/v3/faq/#Usage-with-express-se ...

Determining when a function is triggered from the JavaScript console

Is there a way to conceal a function in JavaScript console so that it's inaccessible for calling? Let me give you some context - let's say I have a JavaScript function that adds records to a database using Ajax. The issue is, anyone can call thi ...

ReactJS component's function become operational only after double tapping

Dealing with the asynchronous nature of react hook updates can be a common challenge. While there are similar questions out there, I'm struggling to find a solution for my specific case. The issue arises when trying to add a new product object into a ...