Retrieving JSON object Array from a Local Server through Firefox Results in CSP Error or NetworkError

Hey there, hope everyone is having a great night! I just got caught up in something for about an hour and a half, so I apologize in advance for taking up your time with this question.

So, I'm trying to retrieve the posts from: http://localhost:5000/posts

When I use the following code:

fetch('/posts')
  .then(res => res.json())
  .then(resBody => console.log(resBody));

In the Firefox Developer Console, I receive the following error:

Content Security Policy: The page's settings blocked the loading of a resource at http://localhost:5000/posts ("default-src").

Promise { <state>: "rejected", <reason>: TypeError }
​
<state>: "rejected"
​
<reason>: TypeError: NetworkError when attempting to fetch resource.
​
<prototype>: Promise.prototype { … }

Using Postman, I am able to fetch the array of JSON objects (The Posts)

[{"postId":1,"message":"Hello World!"},{"postId":2,"message":"Ciao!"}]

I can successfully make POST requests and add new posts to the server using Postman.

The issue arises when I try to do the same in the developer console using Firefox.

I don't believe it's related to the server code (since Postman works fine), but here is the server code in case you want to test it:


const posts = [
  {
    postId: 1,
    message: "Hello World!"
  },
  {
    postId: 2,
    message: "Ciao!"
  },
];

let nextPostId = 3;

// Continued server code...

Answer №1

After some investigation, I discovered that the issue was a CORs policy error specifically with Firefox, while Chrome had no problem functioning correctly.

To resolve this issue, I decided to utilize Chrome whenever accessing local APIs.

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

Sending POST parameters via Jquery POST from a Java Servlet to Javascript

My JavaScript code initiates a POST request on my Servlet. $.post("RecipeServlet", { r_id: r_id, }, function(data, status){ var foo = data.foo; var bar = data.bar; }); Now, the Servlet is expected to work with the received r_id and then send ...

How to eliminate escape characters in Jquery Post requests

I've come across several questions similar to mine, but I haven't found a satisfactory answer yet. My issue is as follows: I'm trying to convert a JQuery object into a Json String and then send this string to a PHP webpage. The sending part ...

Performing a series of get requests in Angular 2

There is a configuration service that retrieves specific information from a JSON file. getConfiguration(key) { return this.http.get('./app/config/development.json').map(res => { this.result = res.json(); return this.result[ke ...

Extracting POST information through PHP's AJAX Request

I am facing an issue where I keep receiving null values when using the following code: Here is my Ajax request: formData = { u: "3959eeadb32e02b85a792e21c", id: "6d7613df26" }; $.ajax({ ...

Tips for utilizing ng-repeat with a function that generates a fresh object?

My HTML code includes the following element: <button ng-click="console.log(key)" ng-repeat="(key, value) in getLocalStorageKeys() track by $index"> In my JavaScript file, I have the following function: $scope.getLocalStorageKeys = function(){ ...

Using a ternary operator to render a span tag in ReactJS

I need to display a number in a span tag with larger font size in Spanish. Here is my React.js code using a ternary operator: <div> {togo !== 0 ? (<div className="text-center"><span className="display-4">{togo}</span>{togo > ...

Is it possible to prefetch library calls in Next.js in advance?

Recently, I started working with GeoChart using react-google-charts (https://github.com/RakanNimer/react-google-charts). However, I noticed that several scripts load after the entire process is completed. In my scenario, is loading towards the end. Is t ...

Having trouble with localstorage.setitem function in Angular?

Check out the function below. I can see an object in the console.log using res: login2(){ console.log(this.user_form_value); console.log(this.password_form_value); this._loginService.login(this.user_form_value, this.password_form_value).subscr ...

Hey there, could you please set up the DateTimePicker in my expo project using React Native?

Hey everyone, I'm currently trying to set up DateTimePicker but encountered an error. Here's the issue: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: undefined@undefined npm ERR! Fou ...

Retrieving information from controller to HTML page in AngularJS

Check out my code on Plunkr: http://plnkr.co/edit/8sBafktFzFa8fCLLJgMF This is the JavaScript file: angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl&ap ...

Showing the ng-controller contents post executing AJAX request using the "as" method

My goal is to display the contents of ng-repeat after making an AJAX call using $http. <table ng-controller="TableController as tc"> <tr> <th>Date</th> <!-- other headers are here --> ...

Production Server experiencing issues with sending Large Lists via Http Post

I'm experiencing an issue where the server is unable to read values from a large list when sent using Post. Oddly enough, this works on the homologation server but not on the production server. Http post AngularJs $http({ url: $rootScope.raiz_ws ...

Text in d3.js vanishing while undergoing rotation

I have been struggling for hours with what seems like a simple problem and haven't made any progress. I'm hoping to receive some valuable advice from the brilliant minds on stackoverflow. You can view my demo at I attempted to use jsfiddle to s ...

From JSON to ArrayList to String array conversion in Android

I have searched through various discussions on this topic, but no definitive answer has emerged. I am facing an issue where I need to retrieve data from a MySql database and convert it into JSON format, then store it in an ArrayList before eventually conve ...

A beginner's guide to implementing dot navigation within the Jackson JsonNode

Take a look at this code snippet: val parsedData = ObjectMapper().readTree(vcap) parsedData.get("spaces")?.firstOrNull()?.get("block1")?.asText() I'm interested in improving the readability of this code by using dot notation for navigation. Here&ap ...

What is the best way to create a time delay between two consecutive desktop screenshot captures?

screenshot-desktop is a unique npm API that captures desktop screenshots and saves them upon request. However, I encounter the need to call the function three times with a 5-second delay between each call. Since this API works on promises, the calls are e ...

Utilize the power of both $push and save functions in MongoDB for efficient

While developing my pet application, I encountered a problem. I am using nodejs and the mongojs library to interact with MongoDB. The code I wrote goes like this: db.users.findOne({_id: ObjectId(id)}, function (err, doc) { if (err) { res.sta ...

How to retrieve scope variable within the <script> element

I have a question about using angularjs. Here is the structure of my HTML: <html> <body ng-controller="datafileController"> <div class="container"> <center><h1>Datafiles</h1></center> ...

I'm experiencing difficulty accessing the correct identification number for my questions on the website

Hi, I'm currently developing a website using Meteor where users can post questions and receive answers. I want to implement a feature that allows users to delete their own questions. When I try to directly pull the ID of the question and delete it, it ...

Issue with Material UI scrollable tabs failing to render properly in Internet Explorer

Currently, we are integrating Material UI into our tab control for our React Web UI. Everything is functioning smoothly in Chrome, but when we attempted to test it in IE, the page failed to load and presented the error below: Unhandled promise rejection ...