How to resolve the CORS issue using proxy in angular

Question

I am using express Node backend and frontend for angular. the thing is when i was integrate my API to angular i had CORS problem. inside the developer console i have got a error like this "XmlHttpRequet cannot load http://localhost:3000/student No Access-Control-Allow-Origin"

I have tried to proxy the backend adding a proxy-confg.json inside the angular project. but the result also same. still have CORS problem.

// node js endpoint
ApienpointUrl = 'http://localhost:4200/stdApi/student';

// getting data from endpoint
getStudentfromMock() {
return this.http.get(this.ApienpointUrl).pipe(
  map((res: any) => res),
  catchError(this.handleError)
);
}

Here the Proxy configuration inside angular project proxy.conf.json

{
  "/stdApi/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

i am getting error like this:-

"XmlHttpRequet cannot load http://localhost:4200/stdApi/student No Access-Control-Allow-Origin. header is present on the request resources origin 'http://localhost:3000' therefor not allowed access".

Verify well the Api Endpoint url , maybe you have more prefixes (like stdApi/v1 ), as a suggestion, verify the apiEndpoint in your environement.ts : instead of 'localhost:3000' is should be 'localhost:3000/stdApi' ;) — Smaillns
– Smaillns, Commented Feb 8, 2021 at 17:54

Jins Thomas Shaji · Accepted Answer · 2019-11-12 09:13:42Z

2

For proxying to backend server, after adding proxy configuration in proxy.conf.json in your project's src/ folder, add the proxyConfig option to the serve target, in the CLI configuration file, angular.json:

...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
...

Then run dev server with this proxy configuration, call ng serve.

OR

Run ng serve with proxy configuration:

ng serve --proxy-config proxy.conf.json

More info: https://angular.io/guide/build#proxying-to-a-backend-server

answered Nov 12, 2019 at 9:13

Jins Thomas Shaji

8775 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raheem Mohamed Over a year ago

Thanks mate. Yes you are right. but i have just modify the package.json and run the project using npm start. this is also work well. "scripts": { "ng": "ng", "client": "ng serve --proxy-config proxy.conf.json" }

Jins Thomas Shaji Over a year ago

Yeah. You can do it with scripts property in package.json too. :)

Raheem Mohamed · Accepted Answer · 2019-11-12 09:16:06Z

1

I have found another way to fix this CORS. here what it is.

Rewriting the URL path

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

This also work for me.

answered Nov 12, 2019 at 9:16

Raheem Mohamed

8073 gold badges7 silver badges15 bronze badges

2 Comments

Raheem Mohamed Over a year ago

This is were i have found the answare. link

julealgon Over a year ago

The link you provided is broken. Can you update it?

Sachin Shah · Accepted Answer · 2019-11-12 08:46:57Z

0

Add this code in app.js file.

app.use((req, res, next) => {
   // Website you wish to allow to connect
   res.setHeader('Access-Control-Allow-Origin', '*');

   // Request methods you wish to allow
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, token, language');

   // Set to true if you need the website to include cookies in the requests sent
   // to the API (e.g. in case you use sessions)
   res.setHeader('Access-Control-Allow-Credentials', true);

   // Pass to next layer of middleware
   next(); 
});

And restart the server.

answered Nov 12, 2019 at 8:46

Sachin Shah

4,5634 gold badges26 silver badges55 bronze badges

3 Comments

Jins Thomas Shaji Over a year ago

Bypassing CORS will be a security threat. You can read more here: codecademy.com/articles/…. Angular always recommends using proxy server for avoiding CORS issue on development.

Jan69 Over a year ago

How to pass API Key in the header?

Pian0_M4n Over a year ago

res.setHeader('Access-Control-Allow-Origin', '*'); Browsers no longer accept * as a valid Origin since 2018

Collectives™ on Stack Overflow

How to resolve the CORS issue using proxy in angular

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related