Angular 10 with nginx and asp.net core 3.1 webapi not working with pathlocation strategy

Question

My application as usual working in localhost but same is not working when build with --prod mode and with nginx server. So I gone with some reference and found a solution to add

server {
    listen 80;
    server_name my_server_name;
    root /projects/angular2/myproject/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

In nginx configuration file.

But as soon as I add this and restart the nginx, I get 500 internal server error on any path other than /

500 Internal Server Error

By going into network tab, I get this detail:

Request URL: https://mywebsite/api/Catalog/isProduct
Request Method: POST
Status Code: 500 Internal Server Error
Remote Address: myIP:443
Referrer Policy: strict-origin-when-cross-origin
Connection: close
Content-Length: 604
Content-Type: text/html
Date: Tue, 26 Jan 2021 03:04:20 GMT
Server: nginx/1.14.0 (Ubuntu)
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,pt;q=0.7,hi;q=0.6
Authorization: Bearer Mytoken
Connection: keep-alive
Content-Length: 22
Content-Type: application/json
Cookie: AMCV_8F99160E571FC0427F000101%40AdobeOrg=1585540135%7CMCIDTS%7C18620%7CMCMID%7C59349257712268340141088354605341356601%7CMCAAMLH-1609337205%7C12%7CMCAAMB-1609337205%7CRKhpRz8krg2tLO6pguXWp5olkAcUniQYPHaMWWgdJ3xzPWQmdj0y%7CMCOPTOUT-1608739605s%7CNONE%7CvVersion%7C4.4.0; private_content_version=4ee6cfc568b91cc1305890e54754f5d8; cart=%7B%22cartId%22%3A4%2C%22startTime%22%3A%222021-01-25T12%3A25%3A53%22%2C%22lastUpdated%22%3A%220001-01-01T00%3A00%3A00%22%2C%22customerId%22%3A0%2C%22cartDiscount%22%3A175%2C%22cartAmount%22%3A425%2C%22cartMrp%22%3A600%2C%22cartItems%22%3A%5B%7B%22cartitemId%22%3A3%2C%22cartId%22%3A0%2C%22itemId%22%3A12%2C%22itemName%22%3A%22Goat%20Milk%20Soap%20100%20GM%22%2C%22qty%22%3A1%2C%22price%22%3A180%2C%22specialPrice%22%3A125%2C%22amount%22%3A125%2C%22mrp%22%3A180%2C%22urlKey%22%3Anull%2C%22shortDescription%22%3A%22Goat%20Milk%20Soap%20100%20gms%22%2C%22thumbnailUrl%22%3A%22https%3A%2F%2Fwebsite%2Fcontent%2Fimages%2FProduct%2Fgoat-milk-soap.png%22%2C%22thumbnailWebp%22%3A%22https%3A%2F%2Fwebsite%2Fcontent%2Fimages%2FProduct%2Fgoat-milk-soap.webp%22%2C%22taxValue%22%3A0%7D%2C%7B%22cartitemId%22%3A4%2C%22cartId%22%3A0%2C%22itemId%22%3A6%2C%22itemName%22%3A%22Turmeric%20Honey%20300%20GM%22%2C%22qty%22%3A1%2C%22price%22%3A420%2C%22specialPrice%22%3A300%2C%22amount%22%3A300%2C%22mrp%22%3A420%2C%22urlKey%22%3Anull%2C%22shortDescription%22%3A%22Turmeric%20Honey%20300%20gms%22%2C%22thumbnailUrl%22%3A%22https%3A%2F%2Fwebsite%2Fcontent%2Fimages%2FProduct%2Fturmeric-honey.png%22%2C%22thumbnailWebp%22%3Anull%2C%22taxValue%22%3A0%7D%5D%7D
DNT: 1
Host: mywebsite
Origin: https://website
Referer: https://website/url
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36
{Url: "gir-cow-ghee"}
Url: "gir-cow-ghee"

The difference my my nginx file and examples is that My nginx configuration is complex as it has to handle asp.net core webpi and handle static contents both.

Nginx config file

server {
    listen 80;
    return 301 https://$host$request_uri;
}

server {
#       listen 80;
        listen 443 default ssl;
        #ssl on;
        server_name mywebsite;

        index index.html;
        ssl_session_cache  builtin:1000  shared:SSL:10m;
        ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
        ssl_prefer_server_ciphers on;

        gzip on;
        gzip_static on;
        gzip_types font/woff2 text/plain text/css application/json application/$
        gzip_proxied  any;
        gzip_vary on;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;


         location / {
             proxy_pass http://localhost:5000;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection keep-alive;
             proxy_set_header Host $host;
             proxy_cache_bypass $http_upgrade;
             proxy_redirect http://localhost:5000 https://ayushmanbhava.org;
             try_files $uri$args $uri$args/ /index.html;
#            try_files $uri $uri/ /index.html;
    }

        root /home/winnie/www/html;
        index index.html index.htm index.nginx-debian.html;

    ssl_certificate /etc/letsencrypt/live/mywebsite/fullchain.pem; # ma$
    ssl_certificate_key /etc/letsencrypt/live/mywebsite/privkey.pem; # $
}

Now the question is, how may I work with asp.net core web api 3.1 with Angular path location strategy.

I can forward more code if required.

question from:https://stackoverflow.com/questions/65895527/angular-10-with-nginx-and-asp-net-core-3-1-webapi-not-working-with-pathlocation

Answer 1

Waitting for answers