blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Error in Angular 8 application with Solr 8.1.0

Question

I am getting a CORS error in my Angular 8 application when i check in the console of Chrome browser.

This is happening when i'm hitting for Solr search version 8.1.0.

This is my solr URL http://abc123.aaa.bbb.com:8983/solr/VW_POB_SOLR_SEARCH_MASTER/select?q=search_text:%22maha%22

Access to XMLHttpRequest at 'http://abc123.aaa.bbb.com:8983/solr/VW_POB_SOLR_SEARCH_MASTER/select?q=search_text:%22maha%22' from origin 'http://localhost:4201' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

core.js:6014 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://abc123.aaa.bbb.com.com:8983/solr/VW_POB_SOLR_SEARCH_MASTER/select?q=search_text:"maha"", ok: false, …}

I tried out few method's mentioned in the stackoverflow but it doesn't seem's to be working.

CORS Angular 8 it gives me

Having issue with CORS error in angular 8 App

origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

I think there is some problem with the Cross Origin I even tried installing CORS through " npm install --save cors ".

My Proxy.conf.js looks like this:

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

and my angular.json looks like this

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "JBPWebNg": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/JBPWebNg",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/custom-theme.scss",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "JBPWebNg:build",
            "proxyConfig": "src/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "JBPWebNg:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "JBPWebNg:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "JBPWebNg:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "JBPWebNg:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "JWebNg"
}

Please let me know if any one know's the fix.

Answer 1

You don't. The server you are making the request to has to implement CORS to grant JavaScript from your website access. Your JavaScript can't grant itself permission to access another website.

Use a CORS extension from web store of chrome browser.

Here is the link of the extensions: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl=en