AJAX request not working on localhost CORS policy

Question

I am creating an angular application which involves working with API. I have created an API on my localhost and tried to request on it with AJAX. But it shows me the CORS error. I tried everything to solve this but nothing worked even from the stackoverflow. It shows me error like

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.

How can I do this?

You wrote that you tried everything - did you try adding a Access-Control-Allow-Origin header on the API response, as the error message tells you? — peeebeee, Mar 03 '20 at 08:58

Codebling · Accepted Answer · 2020-03-03T09:19:56.843

1

You must use the same origin. The site is at http://localhost:4200 but you are trying to access http://localhost.

Add the port so that they both match, e.g. send your request to http://localhost:4200/graphql

Alternatively, add some CORS headers on your server.

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

You can do this in Express with the cors middleware If you are on express server just add the following line:

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

Read more about CORS on MDN

edited Mar 03 '20 at 09:19

answered Mar 03 '20 at 08:57

Codebling

10,764
2
38
66

but on this port my angular app runs and my API & app both are clashing – Yogesh Aggarwal Mar 03 '20 at 08:59
Are you using `ng serve`? – Codebling Mar 03 '20 at 09:01
I understood what are you saying but how can I add cors. Can you add the xhr request code please! – Yogesh Aggarwal Mar 03 '20 at 09:02
@YogeshDeveloper CORS must be added on the server. – Codebling Mar 03 '20 at 09:03
Yes. to serve my application – Yogesh Aggarwal Mar 03 '20 at 09:03
Please tell me how can I do this in my local express server? – Yogesh Aggarwal Mar 03 '20 at 09:04
@YogeshDeveloper this is the development server. You can run your API and serve your Angular from the same server – Codebling Mar 03 '20 at 09:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208899/discussion-between-yogesh-developer-and-codebling). – Yogesh Aggarwal Mar 03 '20 at 09:05

AJAX request not working on localhost CORS policy

1 Answers1