The issue of CORS preflight request error persisted even after attempting to resolve it by installing the npm cors

Encountering the following console error while using the fetch api:

Error Message in Console:

The Fetch API is unable to load https://... The response to the preflight request failed to pass the access control check: No 'Access-Control-Allow-Origin' header was found on the requested resource. This means that origin 'https://...' does not have permission to access it. The response received an HTTP status code of 404. If you require an opaque response, adjust the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I attempted to resolve this issue by installing the npm cors package.

npm install cors --save

Following this, I added the following lines to server.js

const cors = require('cors');
app.use(cors());

Setup instructions for Cors package: https://www.npmjs.com/package/cors

Despite these steps, I am still receiving the same preflight request error. Would appreciate any advice on whether additional setup for the cors package is necessary or if there are other actions that need to be taken?

Answer №1

It's possible that the server isn't including the necessary "Access-Control-Allow-Origin" header, or the domain in the header value is incorrect. Try adding the "Access-Control-Allow-Origin" header with a value of * and check if that resolves the issue.

For more information, you can visit

If you're receiving a 404 error, it could be because your application/framework isn't adding the header when a requested resource is not found.

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 methods can Cypress use to validate content containing hyperlinks?

My current task is to develop an automation test that confirms the presence/display of content containing a hyperlink embedded within text. Please refer to the screenshot I have provided for better understanding, as it illustrates the specific content encl ...

Error: Sorry, there was an issue with the code (React)

I'm attempting to build a React project without Node, and I'm trying to call a JS file from an HTML file. This is just a simple example for learning purposes. However, I keep encountering the Uncaught SyntaxError: Unexpected token '<&apos ...

Element remains hidden until the developer console is activated

On my website, I've noticed that certain LayerSlider elements are remaining invisible until: The window is resized I disable the Bookmarks bar in Chrome (quite strange, right?) I switch on the Chrome debugger tools This issue is not exclusive to Ch ...

How to show the current week using React Native

Looking to show the current week of the month in a specific format using react-native: (Week 2: 05.10 - 11.10) (for example, displaying week 2 of the current month) Any ideas on how to make this happen? I'm aware of packages like momentjs that can ...

I encountered an issue in my GitLab CI where the command "yarn"

I've encountered an issue while setting up my gitlab-ci to use yarn install instead of npm install This is how my current gitlab-ci.yml looks like: image: node:6.9.4 cache: paths: - node_modules/ - .yarn before_script: - apt-get update -qq ...

Having trouble getting Material-UI classes to work with external SVG icons?

I recently crafted a Material-UI persistent drawer that contains a list item component designed to alter the icon color upon user interaction. However, my styling adjustments only seem to apply to Material-UI icons and not external SVG ones. If you'r ...

Verify the existence of the email address, and if it is valid, redirect the user to the dashboard page

Here is the code snippet from my dashboard's page.jsx 'use client' import { useSession } from 'next-auth/react' import { redirect } from 'next/navigation' import { getUserByEmail } from '@/utils/user' export d ...

Tips for retrieving selected items in an array object

Within my UI, I have a select field that, on change, populates corresponding data in a div with nested ul and li elements. What I am attempting to achieve is to convert the selected items within the list (which include checkboxes) into an object of arrays ...

The posenet TensorFlow model results in Node.js do not contain any position detail for coordinates "x" and "y"

I executed the posenet model on node v8.11.0. Below is the code snippet that I utilized. Unfortunately, the output results are not displaying the position of each pose; instead, it simply shows [Object]. It seems like there might be a canvas-related issue. ...

Each time I attempt to update my profile on the web application, I receive this notification

Working on creating a web app using react, redux, and node for managing profile data. I have a function that controls both creation and editing of profiles. The creation works fine, but I encounter an error message when trying to edit. I've reviewed m ...

Exploring the intricacies of React's useEffect: Solving the challenge of updating data when two separate dependency arrays are

I am facing an issue with two different useEffect hooks where the dependency arrays are different. const [dateFilterSort, setDateFilterSort] = useState({ queryText: initialQueryText(params.sortName), cardText: initialCardText(params.sortName), ...

Employing a function to concatenate promises

In my coding process, I have come across a situation where I need to fetch content and then save it using two separate functions. Each function performs a different task based on the type of content provided. These functions act as helper functions in my o ...

When accessing the JavaScript date object, no output is being returned

I have a calendar layout consisting of floated div elements, rather than using an actual <table>. My goal is to allow the user to click anywhere on a row to add a new booking. The challenge lies in accurately calculating the time at which they clicke ...

Dealing with nested mappings within arrays in React poses a challenge

I need to work with structured object data and want to nest mappings in the react return function for rendering workouts based on a chosen date. Here is the data I have: [ { "date":"Saturday, May 11th", "workouts":[ { ...

Redis VS RabbitMQ: A Comparison of Publish/Subscribe Reliable Messaging

Context I am working on a publish/subscribe application where messages are sent from a publisher to a consumer. The publisher and consumer are located on separate machines, and there may be occasional breaks in the connection between them. Goal The obj ...

Transferring data from JavaScript to PHP for geolocation feature

Hello everyone, I'm looking to extract the longitude and latitude values from my JavaScript code and assign them to PHP variables $lat and $lng. This way, I can retrieve the city name and use it in my SQL query (query not provided). Below is the scrip ...

The art of masonry is not effective

I'm having trouble getting the Masonry cascading grid layout library to work in my code. Stylesheet: .post { background: #FFF; padding: 10px; border-bottom: 3px solid #e6e6e6; width: 30.7%; margin: 10px; } Source code: <div ...

Issue with fs.createReadStream function: it is not recognized as a valid function

I'm currently developing a project in VUE that utilizes 'fs', and I have included my code below. async Upload(file){ let fs = require('fs'); console.log(file); console.log(this.dialogImageUrl); ...

How can I show the table row as an inner table row when the first field is identical?

<tr ng-model="check" ng-repeat="orderBook in orderBookDetails| orderBy: 'orderBook.no'" value='check=$scope.orderBookDetails.sowNo'> <td ng-if='check!=orderBook.no'>{{orderBook.no}}</td> <td>{{order ...

Using anchor tags to send HTML code through email

I currently have an anchor tag on my website that looks like this: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0d11131b11101b3e0d11131b09161b0c1b501d1113">[email protected]</a>?subject=Wel ...