The CORS policy is preventing the AJAX request from functioning properly on localhost

Question

The CORS policy is preventing the AJAX request from functioning properly on localhost

Recently, I have been working on an Angular application that requires interaction with an API. To test it out, I set up an API on my localhost and made a request using AJAX. However, I encountered the dreaded CORS error. Despite trying various solutions found on StackOverflow, nothing seemed to work. The error message I kept getting was:

Access to XMLHttpRequest at 'localhost/graphql' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Can anyone provide guidance on how to resolve this issue?

javascript ajax xmlhttprequest angular9

Answer 1

Answer №1

In order to successfully access the site, you must ensure that both locations match in origin. The website is located at http://localhost:4200, but your attempt is targeting http://localhost.

To resolve this issue, include the port number so they align, for example, direct your request to http://localhost:4200/graphql

Alternatively, consider implementing CORS headers on your server.

Access-Control-Allow-Origin: http://localhost:4200

If you are using Express, you can easily achieve this by utilizing the cors middleware. Simply add the following line in your express server:

const cors = require("cors")  // npm i cors
app.use(cors())

For more information on CORS, visit MDN.

Answer 2

In order to successfully access the site, you must ensure that both locations match in origin. The website is located at http://localhost:4200, but your attempt is targeting http://localhost.

To resolve this issue, include the port number so they align, for example, direct your request to http://localhost:4200/graphql

Alternatively, consider implementing CORS headers on your server.

Access-Control-Allow-Origin: http://localhost:4200

If you are using Express, you can easily achieve this by utilizing the cors middleware. Simply add the following line in your express server:

const cors = require("cors")  // npm i cors
app.use(cors())

For more information on CORS, visit MDN.

The CORS policy is preventing the AJAX request from functioning properly on localhost

Answer №1

Similar questions

The complexity surrounding various versions of jQuery, the .noConflict method, and the jQuery migrate feature

NodeJS/WebdriverJS: Error - 'Element is not connected to the webpage'

Extending the number of rows in an Angular mat-table beyond the size of the dataSource

Webpack creating a bundle file with no content

Tips for integrating external JavaScript libraries and stylesheets into a widget

Instructions on adding a class to the parent element when the child has a particular class

Can custom HTML elements be designed to function similarly to standard ones?

Can you explain how to incorporate the ternary operator in a jQuery script that is part of an

In TypeScript version 2.4.1, the fontWeight property encounters an error where a value of type 'number' cannot be assigned to the types of '"inherit", 400'

Generate a customizable URL for my search bar

Using jQuery to make an AJAX call to an API

Creating a Javascript function to turn lights off using CSS manipulation, similar to the feature found

Using JavaScript, pass a single parameter to a function that accepts multiple arguments

I encountered an Angular error that is preventing me from updating and uploading images to my Firebase Storage because it is unable to locate the storage bucket

Facing an issue with AngularJS where I am able to retrieve data.data, but struggling to assign it to a scope variable

The JQuery ajax request is returning a 400 error code indicating a bad request

Please replace the text with only letters and then submit it without any spaces, periods, commas, or other symbols

Mapping geographic coordinates with a null projection using D3

Steps to turn off sourcemaps in the @sentry/nextjs package

Altering the innerHTML of a <p> tag with a smooth transition