如何在 Angular 中更改硬编码的 url 路由以进行生产

Question

我已经在 Heroku 上部署了 Angular/NodeJS 应用程序我收到了这个错误：

Mixed Content: The page at 'https://lit-island-95274.herokuapp.com/signup' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:4001/login'. This request has been blocked; the content must be served over HTTPS.

我认为问题在于静态 url 应该与 web 服务器的基本 Url 相关。

.Ts 文件

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';

import { User } from './user';


@Injectable()
export class LoginService {
  private headers = new Headers({ 'Content-Type': 'application/json' });
  private loginUrl = 'http://localhost:4001/login';  // URL to web api
  private registerUrl = 'http://localhost:4001/register';

  constructor(private http: Http) { }

  Login(login: User): Promise<number> {
    console.log("login", login.username);
    return this.http
      .post(this.loginUrl, JSON.stringify(login), { headers: this.headers })
      .toPromise()
      .then((res) => res.json().login as number)
  }
  Register(register: User): Promise<any> {
    return this.http
      .post(this.registerUrl, JSON.stringify(register), { headers: this.headers })
      .toPromise()
      .then((res) => res.json().added as number)
  }
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }

}

这是 nodeJS Index.js 文件。

const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
var cool = require('cool-ascii-faces');

//var db = require('./db/connect.js');
// Get our API routes
//const api = require('./server/routes/api');
var appRoutes = require('./routes/index');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

// Point static path to dist
app.use(express.static(path.join(__dirname, 'client/dist/')));
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');

  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
app.use('/', appRoutes)
// Set our api routes
//app.use('/api', api);

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/dist/index.html'));
});
app.get('/cool', function(request, response) {
  response.send(cool());
});

const port = process.env.PORT || '4001';
app.set('port', port);


const server = http.createServer(app);


server.listen(port, () => console.log(`API running on localhost:${port}`));

如果我理解了，我应该得到https://lit-island-95274.herokuapp.com/login，而不是http://localhost:4001/login。这应该在部署我的应用程序时自动完成。

但我不知道怎么做。

Answer 1

  private loginUrl = 'http://localhost:4001/login';  // URL to web api
  private registerUrl = 'http://localhost:4200/register';

如果它们确实在本地托管，它就像loginUrl = '/login'; 一样简单，或者您可以简单地将 s 添加到 http，私有 loginUrl = 'https://localhost:4001/login'; 只需通过 https 获取 url。问题在于不安全获取的类型，而不是相对与静态 url。