skip to Main Content

it’s been my first time to deploying an angular app on an online server. it isn’t an enterprise things tbh. during deployment, i used this command

ng build --baseHref=https://www.exampleUrl.com/ --deployUrl=https://www.exampleUrl.com/

then i upload it to CPanel.

  1. at the first few minutes, i can see my web online with absolute url "www.exampleUrl.com" in my PC’s but the app cannot be accessed by mobile devices (idk to see console log in mobile devices so i can’t provide the log issues).
  2. after an hour, it return this error
Access to XMLHttpRequest at 'https://www.exampleUrl.com/ngx_pagespeed_beacon?url=https%3A%2F%2FexampleUrl.com%2F' from origin 'https://exampleUrl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

followed by

www.exampleUrl.com/ngx_pagespeed_beacon?url=https%3A%2F%2FexampleUrl.com%2F:1 Failed to load resource: net::ERR_FAILED

i have been surfing through whole related tag in this forum but none of them works for me. any comment would be really appreciated!

btw, here’s my package.json and angular.json (idk maybe you guys need to observe these)

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.1.1",
    "@angular/cdk": "^12.2.0",
    "@angular/common": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/material": "^12.2.0",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "bootstrap": "^4.5.3",
    "ngx-bootstrap": "^7.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular/cli": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.3.2"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": "f6871353-1796-4510-ac5d-c072d98cf307"
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myproject": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/myproject",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "myproject:build:production"
            },
            "development": {
              "browserTarget": "myproject:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myproject: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",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "myproject"
}

3

Answers


  1. So there are no HTTP requests but still, you are getting No 'Access-Control-Allow-Origin' header is present on the requested resource.

    Well, in this case:

    1. Login to your cPanel control panel.

    2. Under the FILES section, click on the File Manager option.

    3. Go to the public_html folder.

    4. Show hidden files from the settings.

    5. If you have an existing .htaccess file, you will see it in the public_html folder.

    6. Right click on the .htaccess file and click on the Edit menu.

    7. Add the following line

      Header set Access-Control-Allow-Origin "*"

    8. Save.

    Now in case in step 5 you didn’t have a .htaccess:

    5-1. Click on the New File option in the top left corner.

    5-2. Write the file name as .htaccess in the New File Name: field and click on the Create New File button.

    5-3. Now you can write or edit .htaccess file. (Go to step 7).

    Hope this will solve your problem.

    Login or Signup to reply.
  2. This is a server error where the angular app is getting it resources/data from. To resolve this go to backend code base and add the domain of where the angular app is deployed to to the list of allowed host, depending on the language and framework you are using you can research how to add allowed host or install a cors package to the project depending on the language or framework been used on the backend.

    Login or Signup to reply.
  3. Depending on the server you use, you need to allow the domain where the request if originating from to make requests to the server in question.

    To allow all, you will do something like "Access-Control-Allow-Origin" "*"

    The "*" option allows requests from all domains, you can specify specific domains as well. It is a better practice not to allow requests from all domains.

    Below is an extract from one of my old projects written in Java and running on Jetty Server.

    return responseBuilder.header("Access-Control-Allow-Origin", "*").build();

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search