EDIT: My question isn't about enabling CORS
The ASP.Net Core Web API I've created takes one string parameter, then runs a command line utility and saves the output to a csv file. It then calls a few functions to format the csv file. Below is some sample data:
My API isn't hosted anywhere just yet. So for now I'm just running it using IIS Express in Visual Studio. The ultimate goal here is to use this API on a webpage where users can select a server from a form and once the form is submitted, it should automatically display the csv file to the webpage just like in the example above once the API has finished.
My problem starts with my Javascript code. When I submit the form on my webpage, I am getting the following errors in the console:
Access to fetch at 'http://localhost:36798/api/License/lmstat?serverName=28000%40txeappazu030' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.script.js:11 GET http://localhost:36798/api/License/lmstat?serverName=28000%40txeappazu030 net::ERR_FAILED 200 (OK)Error fetching data: TypeError: Failed to fetch at HTMLFormElement.<anonymous> (script.js:11:32)
Here is the Javascript code I'm using to call the API:
document.querySelector('form').addEventListener('submit', async function(event){
event.preventDefault();
const selectedServer = document.getElementById('chosen_Server').value;
//API URL
const apiURL = 'http://localhost:36798/api/License/lmstat';
try{
const response = await fetch(`${apiURL}?serverName=${encodeURIComponent(selectedServer)}`);
if (response.ok){
const csvData = await response.text();
console.log(csvData);
//displayCSVData(csvData);
//console.log('API Response: ', await response.text());
}
else{
console.error('API Request Failed: ', response.status, response.statusText);
}
}
catch (error){
console.error('Error fetching data: ', error);
}
});
I'll also include my HTML below as well:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js" defer></script>
<script src="script.js" defer></script>
<script src="readText.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="frame" id="frame">
<div class="head-bar">
<div class="server-wrapper">
<form id="license-API" method="get" action="http://localhost:36798/api/License/lmstat">
<label for="server-list">Choose a Server:</label>
<select name="server-list" id="chosen_Server">
<option value="Server1">Server1</option>
<option value="Server2">Server2</option>
</select>
<input type="submit" name="submit" value="Submit">
<label for="choose a file" class="fileLabel">Choose a File:</label>
<input type="file" name="inputFile" id="inputFile">
<pre id="output"></pre>
</form>
</div>
</div>
<table id="table"></table>
</div>
</body>
</html>
I first attempted to use Papa.parse after my Javascript, but there were two things wrong here:
- The code should have been inserted in the
if(response.ok)statement. - Papa.parse would return some errors in the console.
Then, I tried using Papa.parse inside the if(response.ok statement, but I run into the same 3 problems I outlined above.