我在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.
我认为问题在于静态网址应该与网络服务器的基本网址相关。
.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}`));
如果我理解,我应该http://localhost:4001/login
而不是https://lit-island-95274.herokuapp.com/login
。这应该在部署我的应用程序时自动完成。
但我不知道如何做到这一点。
答案 0 :(得分:0)
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获取网址即可。问题在于不安全的提取类型,而不是相对于静态网址。