Accessing data from localhost using Vue.js and Axios is restricted due to CORS policy and the error "Access to XMLHttpRequest" may be

Having a minor issue... Trying to retrieve a basic json file from my server for testing purposes (not an actual API).

Utilizing VueJS and axios.

Here is my code :

getServicesAPI() {
      axios.get("http://51.91..../dist/API/Services.json").then((response) => {
        console.log(response.data);
      });

The error message reads : Access to XMLHttpRequest at 'http://51.91..../dist/API/Services.json' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any assistance with this matter would be greatly appreciated. Thank you in advance.

javascriptvue.jsgetaxioslocalhost

Answer №1

The message indicates that the server you are trying to connect to is blocking your request.

To resolve this, you have two options: either enable CORS on the server or use a proxy for your requests. During development, setting up a proxy can be achieved by following the guidelines in the devServer.proxy documentation here

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

What are some strategies for optimizing React performance when managing controlled input from numerous components?

Building a Parent component with multiple child components, each passing data to the parent for an API call. The structure is as follows: const MainComponent = () => { const [child1input, setChild1Input] = useState(""); const [child2input, setChild ...

javascriptreactjsperformancereact-hooksweb-frontend

Converting JavaScript objects into a JSON string and then into a PHP array via POST

Hello everyone, I could really use some assistance with this issue. I am passing a JSON object to PHP like so: var x = {}; x.xt = {}; x.xt.id = id; x.xt.to = foo; somearray.push(x); To convert the object to JSON: $.toJSON(x); The resulting JSON string ...

phpjavascriptajaxjsonjavascript-objects

Use jQuery to permit only numeric characters and the symbol "-" to be entered into a textbox

I have been working on a JQuery script that only allows users to input numbers in a text field. However, I am now trying to modify the code to also allow users to enter "-" (hyphen), but so far it's not working as expected. If anyone can provide assis ...

javascriptjqueryhtmlcss

What is the best way to adjust a CSS width using the output from a JavaScript function?

I am facing a challenge with a GridView within a div wrapper. The row headers along the left side need to always be visible. So far, this setup is working fine. However, I need the wrapper to have a variable width to adjust to the browser size. Although I ...

javascriptasp.netcss

What is the process for placing a breakpoint within a "require"-d library using node inspector?

As I navigate through a library that is multiple layers deep from my project, I am facing the challenge of setting a breakpoint inside it. Node-inspector is a new tool for me, and I am currently exploring how to access the library and set breakpoints in i ...

javascriptdebuggingnode.jsnode-inspector

Error 8007 encountered when attempting to scale at 100% proficiency. Transformation unsuccessful

Wondering if this could be a bug in Photoshop. When scaling a layer and entering values of 100%, an error message pops up: var srcDoc = app.activeDocument; var numOfLayers = srcDoc.layers.length; // main loop for (var i = numOfLayers -1; i >= 0 ; i-- ...

javascriptphotoshopphotoshop-script

The window.onload event is failing to trigger on mobile devices, although it is functioning properly on desktop. (using react js

Thank you for taking the time. Now, let's dive into the main topic: I have a scenario where I need to execute one of two functions based on a boolean value at the start. The decision is made using window.onload. This code works perfectly on desktop b ...

javascriptreactjsgoogle-chromewebmobile

What is the best way to convert a List of objects to JSON using a dynamic variable?

I have a need to serialize a list of objects in a specific way: Imagine I have the following C# class: public class Test { public string Key; public string Value; } List<Test> tests; When I serialize this list (return Json(tests.ToArray()) ...

javascriptc#jsonserializationasp.net-mvc-5

decoding json field containing forward slashes using javascript

Seems easy enough, but I'm having trouble figuring it out. let data="[{name:\"House\",id:\"1\"},{name:\"House and Land\",id:\"5\"},{name:\"Land\",id:\"6\"},{name:\"Terrace\",id:&bs ...

javascriptjsonjsonparser

Waiting for Promise Js to be fulfilled

I've been exploring the use of Bluebird for handling promises in Node.Js. I have encountered a situation where I need a function to return only when a promise is fulfilled. The desired behavior can be illustrated by the following code snippet: functi ...

javascriptnode.jspromisebluebird

Obtaining the text from an element in Selenium using JavaScript

I've been trying to figure this out, and it seems like it should be a simple task, but how can I extract the text from a table displayed in a browser? When I use the "inspect" tool, the code snippet looks something like this: <tr role="row&qu ...

javascriptseleniumxpathasync-awaitcss-selectors

Is it feasible to activate an action on a click of a Vimeo video?

Is there a way to activate an event by clicking if a video is set with background=1 and has no controls? This particular video is from Vimeo, using a plus account which allows for setting background=1. The scenario involves a Vimeo video playing on loop ...

javascriptjqueryvimeo-apivimeo-player

Bidirectional Data Binding with Computed Setter in Vue.js

Exploring the concept of two-way data binding with a basic example: <template> <input v-model="fullname"/> <input v-model="first"/> <input v-model="last"/> </template> <script> var app = new Vue({ el: '#a ...

vue.jswysiwygquill

Trigger the original function again once the other function completes in jQuery AJAX

I'm working on improving my skills in jQuery, AJAX, and JSON. Within my application, there is a dropdown select menu: <select id="serviceload" name="serviceload"></select> The OPTIONS in the select menu are populated dynamically by anot ...

javascriptjqueryajaxjson

Tips for using jQuery to slowly change a CSS property to "auto"

I've encountered a situation where I have an element styled with position:fixed, and bottom: auto;. When I apply the command .animate({bottom : '10%'});, it smoothly slides to the specified position. However, when I try to set it back to its ...

javascriptjqueryhtmlcssjquery-ui

Utilizing Weather APIs to fetch JSON data

Trying to integrate with the Open Weather API: Check out this snippet of javascript code: $(document).ready(function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { $(".ok").html("latitude: " + ...

javascriptjson

How can the .pre() middleware function in Mongoose be utilized?

I'm curious about the use cases for mongoose .pre('validate') and .pre('save'). I understand their functionality, but I'm struggling to think of specific scenarios where I would need to utilize them. Can't all necessary a ...

javascriptmongodbexpressmongoose

Encountering the error message "Received 1 argument, when expecting 4" while attempting to utilize a vuex getter in TypeScript

I encountered an issue while unit testing a getter function. The error message Expected 4 arguments, but got 1. appeared when I attempted to use the getter. My application was built using Quasar and utilizes TypeScript. The value of HttpMocks.mockToken is ...

typescriptvue.jsjestjsvuexquasar

Obtain the printed value of a button via PHP and manipulate it using JavaScript

I have a dynamic table that displays results from a database. <table id="table" class="table datatable-responsive"> <thead> <tr class="bg-teal"> <th>#</th> <th>Date & Time</th& ...

javascriptjquery

Customize Material-UI icons dynamically by changing their props in an array

I am looking to change props (color, size) for multiple icons in an array using Material-UI v4: const ICONS_ARRAY: React.ReactNode[] = [ <AlertCircleCheckOutline />, <AppleSafari />, <MotionPlay />, <AppleKeyboardCommand />, <Fil ...

javascriptreactjsmaterial-uiicons