Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

angular

What is CORS in Angular?

Fahad Farid

CORS is an HTTP header- based mechanism that allows the server to indicate any other domain, scheme, or port origins and enables them to be loaded.

Example

Here is an example of a cross-origin request: Front-end at educative.io makes an XMLHttpRequest for educative.io/shot.json

CORS

To prevent attacks on websites, browsers restrict cross-origin HTTP requests from scripts. XMLHttpRequest and Fetch API follow the same-origin policy and can only process requests from the origin where the application was loaded.

CORS in Angular

Here are the few steps needed to fix the CORS issues in Angular to ensure a smooth data transfer between client and server:

Create a Proxy Config file

In your application, reate a proxy.config.json file in the src folder. Open the file and append the following code to allow all the /api/ requests to be redirected to the target hostname:

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug"
    }
}

Note:* Depending on your use case, you can set secure to true if you want to use the SSL feature.

Append proxy config key

In your angular.json file, add the following key-value pairs in the “serve -> options” field that points it to your proxy.config.json file:

"architect": {
  "serve": {
    "builder": ""
    "options": {
      "proxyConfig": "src/proxy.conf.json"
    },
  }
}

Run

Finally, you may run the dev server using:

ng serve

RELATED TAGS

angular

CONTRIBUTOR

Fahad Farid
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring