Angular仍在没有HTTPS / SSL的情况下执行HTTP请求

Question

我有这个问题，我真的不知道要解决。首先，我在没有SSL的localhost上创建了网站，一切都很好。现在，我添加了SSL，并将所有内容从HTTP迁移到了HTTP S 。

但是无论如何，即使我在URL中添加https：//，浏览器仍然会发出Http请求。

import { Injectable } from "@angular/core";
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from "@angular/common/http";
import { Observable } from "rxjs/Observable";

@Injectable()
export class EnsureHTTPSInterceptor implements HttpInterceptor
{
    constructor()
    {

    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
    {
        const parsedUrl = new URL(window.location.href);
        const baseUrl = parsedUrl.origin; // this will print http://example.com or http://localhost:4200

        const secureReq = request.clone
        ({
            url: (baseUrl + request.url).replace('http://', 'https://')
        });
        console.log(secureReq);

        // send the cloned, "secure" request to the next handler.
        return next.handle(secureReq);
    }
}

这是我的拦截器，做得很好（我认为..）。 我认为这是.htaccess的问题，其中包括强制www，强制https URL和删除斜杠。我让你看看.htaccess

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On
    DirectoryIndex index.php # This line does the trick

    # Force SSL

    # If we receive a forwarded http request from a proxy...
    RewriteCond %{HTTP:X-Forwarded-Proto} =http [OR]

    # ...or just a plain old http request directly from the client
    RewriteCond %{HTTP:X-Forwarded-Proto} =""
    RewriteCond %{HTTPS} !=on

    # Redirect to https version
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteEngine on
    RewriteCond %{REQUEST_URI} /+[^\.]+$
    RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]

    # Force WWWW
    RewriteCond %{HTTP_HOST} !^www\.
    RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</IfModule>

另一件事是，即使我从HTTP请求中删除了斜杠（在前端，如/ api / cart / products /至-> / api / cart / products），应用程序仍会添加它。 / p>

这就是Chrome处理它的方式。

如果要调试，可以在https://www.sarpilii.cf上输入，然后在Magazin->军事背包中输入

如果您重新加载链接（例如：https://www.sarpilii.cf/produs/military-backpack），laravel将在localStorage中设置数据，并且不会从API请求

Answer 1

将此设置为您的api调用的基础，而不是拦截器

enviroment.prod

export const environment = {
  apiUrl: 'https://example.com/api'
}

在服务中

import { environment } from 'environments/environment';
const API_URL = environment.apiUrl;