Question posted in 
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.
- 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).
- 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
So there are no
HTTPrequests but still, you are gettingNo 'Access-Control-Allow-Origin' header is present on the requested resource.Well, in this case:
Login to your
cPanelcontrol panel.Under the
FILESsection, click on theFile Manageroption.Go to the
public_htmlfolder.Show hidden files from the settings.
If you have an existing
.htaccessfile, you will see it in thepublic_htmlfolder.Right click on the
.htaccessfile and click on theEditmenu.Add the following line
Header set Access-Control-Allow-Origin "*"Save.
Now in case in
step 5you 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
.htaccessin the New File Name: field and click on theCreate New Filebutton.5-3. Now you can write or edit
.htaccessfile. (Go tostep 7).Hope this will solve your problem.
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.
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();