Capacitor error when build in Android Studio

Capacitor
1

hello
i am create Project with Ionic and Asp.Net Core Web Api
when Build Project in Android Studio
can’t get Api and Show Blank Screen
Capacitor worked true , example : network Check , status bar and …

web api published in Host
i am get Error when Build App :

E/Capacitor/Console: File: http://localhost/home/main - Line 0 - Msg: Access to XMLHttpRequest at 'https://demo2.mkhalesi.ir/homepage/get-home-page-images-by-
location/4' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'
 header is present on the requested resource.

E/Capacitor/Console: File: http://localhost/main.9e37b4369bacdacfb0d3.js - Line 1 - Msg: ERROR [object Object]

CORS in backend worked true

interceptor in client :

 return req.clone({
                    url: DomainName + req.url,
                    headers: req.headers
                        .append('Access-Control-Allow-Origin', '*')
                        .append('Access-Control-Allow-Methods', ['POST', 'GET', 'OPTIONS', 'DELETE', 'PUT'])
                        .append('Access-Control-Allow-Headers',
                            ['append', 'delete', 'entries', 'foreach', 'get', 'has', 'keys', 'set', 'values', 'Authorization'])
                        .append('accept-language', 'en-US,en;q=0.9,fa;q=0.8')
                        .append('Authorization', 'Bearer ' + token.value),
                    withCredentials: false,
                });

package.json :

  "dependencies": {
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@capacitor/android": "^3.0.0-rc.0",
    "@capacitor/app": "^0.3.6",
    "@capacitor/core": "^3.0.0-rc.0",
    "@capacitor/geolocation": "^0.4.3",
    "@capacitor/haptics": "^0.3.6",
    "@capacitor/keyboard": "^0.5.6",
    "@capacitor/network": "^0.4.6",
    "@capacitor/splash-screen": "^0.3.6",
    "@capacitor/status-bar": "^0.4.6",
    "@capacitor/storage": "^0.3.6",
    "@ionic/angular": "^5.5.2",
    "@types/mapbox-gl": "^2.1.1",
    "animate.css": "^4.1.1",
    "ngx-persian-pipe": "^0.1.7",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.4",
    "@angular-eslint/builder": "2.0.2",
    "@angular-eslint/eslint-plugin": "2.0.2",
    "@angular-eslint/eslint-plugin-template": "2.0.2",
    "@angular-eslint/template-parser": "2.0.2",
    "@angular/cli": "~11.2.4",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@capacitor/cli": "^3.0.0-rc.0",
    "@ionic/angular-toolkit": "^3.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.0.2"
  },

Do I have to put settings in the Capacitor.config.json file? To be able to get the Api

{
  "appId": "ir.mkhalesi.IonicFramework",
  "appName": "TopKala",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

Thank you for guiding me

2

CORS should be addressed on the server.

1 Like
3

thanks for your response
Do you mean to do this in the interceptor file?

   .append('Access-Control-Allow-Origin', 'demo2.mkhalesi.ir')
4

No. None of that stuff belongs in the client code. Address the issue on demo2.mkhalesi.ir.

1 Like
5

Setting for CORS in Startup File :

            services.AddCors(options =>
            {
                options.AddPolicy(
                    "DemoMkhalesiIrInfoCORS",
                    builder =>
                        //builder.AllowAnyOrigin();
                        builder
                            .SetIsOriginAllowed(_ => true)
                            .AllowAnyMethod()
                             .AllowAnyHeader()
                            .AllowCredentials()
                        .SetPreflightMaxAge(TimeSpan.FromSeconds(43200))
                );
            });

   app.UseCors("DemoMkhalesiIrInfoCORS");
1 Like
6

hi
please help me !
Setting for CORS in Startup File must changed ?

7

I use JavaScript as little as I possibly can, which means I have no experience with Node.js on the server side. I also couldn’t even tell you what Asp.Net even means, so somebody familiar with your server-side stack is going to have to take over here.

1 Like
8

Thankful for answer
hope of success

9

Hey

You should be able to use the following code in your .net core web API.

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddCors(o => o.AddPolicy("AllowAll", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));

   ... 
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseCors("AllowAll");

    ...
}

One thing I did notice with your error message is that you are trying to access an HTTPS resource on your API from an HTTP request.

Try accessing the API through the HTTP port number.

Gooood luckskie

1 Like