Workaround for Fragment URLs not allowed with Google Redirect URI

后端未结

关注

 3  1413

I use mac to develop a MEAN stack project. My web pages https://localhost:3000/#/login and https://localhost:3000/#/new work (note that all my page

相关标签:

3条回答

梦如初夏

2021-01-13 22:24

You can remove the hash from your URL using the HTML5 mode:

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

Don't forget to set the base in your <head> tag:

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

Note that if you are using Angular 1.6, you also need to change the hashPrefix:

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

More info about the changelog here.

0 讨论(0)

予麋鹿

2021-01-13 22:27

The changes you have to make:

1) Angular Side: as you already changed

$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) This change you need from server side,

If using 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>

In the above my-app will be the application name. and DocumentRoot and Directory paths should be complete path to your application root

For 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

0 讨论(0)

情歌与酒

2021-01-13 22:34
In app->init.js enable below mode in config
```
 $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    }).hashPrefix('!');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...