Error - CORS policy

Ramco Ramco

I am getting below error

Access to fetch at 'freeapi.miniprojectideas.com/api/BigBasket/GetAllProducts' from origin 'localhost:4204' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Thanks

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rajeesh Menoth2y ago
Hi,

ss
```
{
  "/api/*": {
      "target": "http://localhost:4204",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true 
  }
}
```
The "changeOrigin" property is set to true to ensure that the origin header of the request is changed to match the target URL.

Once you have added the proxy.conf.json file to your project, you can start your development server by running ng serve. This should start a proxy server that will forward requests to your backend server and resolve the CORS issue.
+1

Ramco Ramco2y ago

I have written below code but i am getting same problem


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


-----------------------------------------------
"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "move-safe:build",
            "proxyConfig": "src/proxy.conf.json" },
          "configurations": {
            "production": {
              "buildTarget": "myApp:build:production"
            },
            "development": {
              "buildTarget": "myApp:build:development"
            }
          },
          "defaultConfiguration": "development"
        },

Thanks

Ramco Ramco2y ago
Hi Rajneesh

I was able to use this APi 'freeapi.miniprojectideas.com/api/BigBasket/GetAllProducts. Only today i am facing problem. What changes should i make in Angular 17 code

Thanks
+1
Rajeesh Menoth2y ago
Hi,

This article provides a clear explanation on how to resolve the CORS issue in Angular. You can refer to it for guidance.

https://medium.com/weekly-webtips/do-you-know-how-to-resolve-cors-issues-in-angular-9d818474825f
+1