Блог

LocalHost, Angular 11 ( https://localhost:4200 ) и Node API ( https://localhost:3001 ), оба используют OpenSSL, браузер-Chrome. Чтобы сгладить Status: CORS error (из-за разных портов) Я следую этому добавлению прокси, получил это в консоли Angular

[HPM] Произошла ошибка при попытке прокси-запроса /где-то1 с локального хоста:4200 на https://localhost:3001 (DEPTH_ZERO_SELF_SIGNED_CERT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Слежка не помогла:

1. Подтверждено, что Chrome, вызванный F5, chrome://flags/#allow-insecure-localhost включен.
2. Добавлен process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; в API узла server.js.

Прокси.conf.json

 {
    "context": 
    [
        "/somewhere1",      
        "/xyz/somewhere"
    ],
    "target" : "https://localhost:3001", 
    "secure": true,    
    "changeOrigin": true,  
    "rejectUnauthorzied": false,
    "logLevel": "info"  
}
 

угловой.json

 "serve": {
          ...
          "options": {
            "browserTarget": "myapp:build",
            "ssl": true,
            "proxyConfig": "src/proxy.conf.json"
 

Вызов API:

 private http: HttpClient;
const httpOptions = 
      {
          headers: new HttpHeaders({'Content-Type': 'application/json'}),
          rejectUnauthorized: false
      };
this.http.post<any[]>("/somewhere1/hello", {}, httpOptions).subscribe
 

Поверьте, что это конец.

После нескольких дней разочарования я, наконец, смог решить их все и разместил решение здесь, надеюсь, оно поможет кому-то продвинуться вперед.

Окружающая среда:

1. Интерфейс Angular 11/12 использует стороннюю аутентификацию, такую как Google.
2. Сервер API-это узел 14.
3. Оба являются httpS/SSL.

Решение:

1. Следуйте этой статье, чтобы создавать надежные .crt и .key файлы
2. Я не добавлял localhost в hosts файл.
3. Добавьте proxy.conf.js файл (или файл .json с соответствующим форматом) и включите его в файл.json.
4. Нет необходимости указывать httpOption для каждого отдельного http-вызова.
5. Узел API, добавьте два файла в server.js .

Мой Proxy.conf.js:

 const PROXY_CONFIG = 
[
    {
        context: 
        [
            "/path1",      
            "/path2",
            ...
        ],
        "target" : "https://localhost:3001", // I use 3000 for non-SSL
        "changeOrigin": true,  // helps on CORS Error in F12
        "logLevel": "debug",
        "rejectUnauthorzied": true, // or false if ok for you
        "secure": false,            // PROD must be "true", but DEV false else "UNABLE_TO_VERIFY_LEAF_SIGNATURE"
        "strictSSL": true,          // false is default
        "withCredentials": true     // required for Angular to send in cookie
    }
]
module.exports = PROXY_CONFIG;
 

Мой угловой.json:

 "architect": {
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build",
            "ssl": true,
            "proxyConfig": "src/proxy.conf.js"
            ...
 

Мой Server.js:

 const fs = require("fs");
// following are the two files mentioned in No.5
const HttpSOptions = 
    {
        key: fs.readFileSync('ssl\server.key'),
        cert: fs.readFileSync('ssl\server.crt')
    }
const httpSServer = httpS.createServer(HttpSOptions, app);
httpSServer.listen(3001, ()=>{console.log('httpS is on 3001');});
 

Чтобы убедиться, что Chrome ПОЛНОСТЬЮ доверяет сертификатам, откройте один из ваших URL-адресов API в Chrome , например http://localhost:3001/path1/func/xyz , вы этого не увидите