Question

我使用mac开发MEAN堆栈项目。我的网页https://localhost:3000/#/login和https://localhost:3000/#/new有效（请注意，我的所有网页都需要/#/才能在中间工作）。 https://localhost:3000/#/new有一个按钮，可通过passportjs进行Google登录。在我的routes ==> index.js我设置

var express = require('express');
var router = express.Router();
... ...

router.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] }));
router.get('/auth/google/callback',
  passport.authenticate('google', { successRedirect: '/login',
                                    failureRedirect: '/login' }));

在Google APIs ==> Credentials中，当我将https://localhost:3000/auth/google/callback设置为Authorized redirect URIs时。单击我页面上的登录按钮会返回错误

Error: redirect_uri_mismatch

The redirect URI in the request, https://localhost:3000/auth/facebook/callback, does not match the ones authorized for the OAuth client. Visit https://console.developers.google.com/apis/credentials/oauthclient/367100934152-7csfhcdnkapil4obku1pr2cnrsmthk61.apps.googleusercontent.com?project=367100934152 to update the authorized redirect URIs.

我想这是因为https://localhost:3000/auth/facebook/callback不是我的应用的有效URI，但如果我在设置页面中设置https://localhost:3000/#/auth/facebook/callback，则不允许：Invalid Redirect: https://localhost:3000/#/auth/google/callback cannot contain a fragment.

那么，有没有人知道我是否可以修改我的应用程序，使其无#工作，以便https://localhost:3000/login和https://localhost:3000/new等可以使用？因此，https://localhost:3000/auth/facebook/callback也将是一个有效的URI ...

修改1：

根据@Sevran和文档how to configure your server to work with html5mode的回答，我做了以下事情：

1）在$locationProvider.html5Mode(true)

中添加了app.config

2）在<base href="/" />中添加index.ejs（注意项目中我没有index.html）

3）将.state('new', url: '/new', ...保留在app.config

中

4）在httpd-vhosts.conf中没有<VirtualHost *:80>和<VirtualHost *:433>，因为我认为我的服务器由express.js而不是httpd-vhosts.conf控制，并且端口是3000。

5）没有在项目中添加.htaccess，如this answer

6）在app.js中添加了以下内容，我还尝试将index.html更改为index.ejs。

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

测试显示

在网址栏中输入https://localhost:3000/#/new变为https://localhost:3000/new，并加载相应的网页。
在网址栏中输入https://localhost:3000/new会引发not found 404错误。
在网址栏中输入https://localhost:3000/auth/google会提升Error: redirect_uri_mismatch，如上所述。

总而言之，我认为重写（没有#的网址）应该由express来管理，但我发布的代码没有完成这项工作。关于.htaccess，我还尝试将其放在DocumentRoot httpd-vhosts.conf或项目的根文件夹中，但它没有帮助。

Answer 1

在app-＆gt; init.js中启用config

中的以下模式

 $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    }).hashPrefix('!');

Answer 2

您可以使用HTML5模式从网址中删除哈希：

appModule.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

不要忘记在 <head>标记中设置基数：

<head>
    <base href="/">
    ...
</head>

请注意，如果您使用的是 Angular 1.6 ，则还需要更改hashPrefix：

appModule.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix(''); // remove the ! from URL
}]);

有关更改日志的详细信息 here 。

Answer 3

您必须做出的更改：

1）Angular Side：，因为你已经改变了

$locationProvider.html5Mode(true) in app.config

added <base href="/" /> in index.ejs

keeps .state('new', url: '/new', ... in app.config

2） hta access

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

3）您需要从服务器端进行此更改

如果使用apache：

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

在上面my-app将是应用程序名称。并且DocumentRoot和Directory路径应应用程序根目录的完整路径

对于Express：

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

Here is the Documentation regarding it

Google重定向URI

3 个答案: