标签: single-page-application

最佳实践 - 在单页应用程序中调用 API 和服务

我有一个单页应用程序，需要调用各种 Web 服务和/或 API。我想了解从 SPA 进行 api 或服务调用的普遍认可的方法是什么。目前我们有两种方法

对于某些第 3 方 API - 我们从单页应用程序直接调用，无需服务器端代理。为了实现这一点，我们启用了 CORS。
对于其他 API 调用 - 我们调用代理（包装器），该代理负责将它们重定向到适当的端点。

我们决定使用哪种方法的方式是 - 如果在调用第 3 方 API 之前需要某种数据操作 - 我们使用代理 - 否则我们直接从 SPA 进行调用。这是一个有效的方法吗？从安全角度来看，第一种方法是否可靠，您有什么反馈吗？在第一种方法中，我们有一个仅 http 的 cookie，它被用作访问令牌来调用第 3 方 api。这是否会使我们公开的 API 变得脆弱？

提前致谢

architecture single-page-application microservices

nes*_*h_s

lucky-day

1
推荐指数

1
解决办法

1142
查看次数

为什么基于令牌的身份验证更适合单页应用程序？

好吧，这可能是一个非常菜鸟或幼稚的问题，但我尝试在互联网上搜索，并且只有在没有找到任何有效的东西后才诉诸堆栈溢出。我一直在阅读有关基于令牌的身份验证以及基于 Cookie 的身份验证。我认为基于令牌的身份验证对于单页 Web 应用程序更好，但无法清楚地理解原因。我将使用 Nodejs 和 AngularJS 来完成同样的任务。

token node.js jwt angularjs single-page-application

Ank*_*vda

lucky-day

1
推荐指数

1
解决办法

2417
查看次数

使用 Node.js + Express 构建简单的 SPA

我开发了一个 Web 应用程序，使用Node.js作为后端，使用 HTML/CSS/JS 作为前端。我正在尝试使用Express框架构建一个单页应用程序。

我想仅使用 Node.js 或 JavaScript 构建一个单页面应用程序，我知道对于响应我们可以调用类似的东西res.render('contact')，但这在我的情况下不起作用，因为我不想动态更改我的页面，我不'不需要任何额外的框架，如 React、Angular……

在我的index.html页面上，有一个菜单，其每个元素都包含一个超链接。例如，当单击索引页面中的联系人超链接时，我想在同一页面上动态显示带有表单的联系页面的内容...等，而不加载页面：

    <li> <a href="/contact">Contact</a></li>

Run Code Online (Sandbox Code Playgroud)

我的server.js文件定义了路由，默认情况下我被定向到索引页面：

//to define the routes
var express = require('express'), app = express();
//to call multiple template engines easly, like html page...ect
var engines = require('consolidate');

app.engine('html', engines.nunjucks);
app.set('view engine', 'html');
app.set('views', __dirname + '/public');
app.use(express.static(__dirname + '/public'));


app.get('/', function(req, res){
    res.render('index');
});

app.get('/contact', function(req, res){
    res.render('views/contact');
});


var server = app.listen(8080, function(){
    console.log('Listening …

Run Code Online (Sandbox Code Playgroud)

javascript node.js express single-page-application

iLy*_*yas

2018 02-05

1
推荐指数

1
解决办法

1万
查看次数

如何为不同的 Angular 5 页面应用不同的（整页）背景？

目前我正在使用 Angular 5 制作 SPA。

我想用背景（不仅仅是一个组件）填充整个屏幕，但我希望每个页面都有不同的背景，我该如何实现？

我已经在相关页面的 component.css 中尝试了这段代码（例如 home.component.css）：

body {
  background-color: aqua;
}

Run Code Online (Sandbox Code Playgroud)

（以背景色为例）

使用这种方法，我以为我可以覆盖每个组件的主体背景，但它似乎不起作用，页面保持空白。

我很感激你能给我的任何帮助，在此先感谢。

html css single-page-application angular angular5

作者

lucky-day

1
推荐指数

1
解决办法

3854
查看次数

NuxtJs 在 Nginx 服务器上构建 SPA

我想在我的 Nginx 服务器上部署我的单页应用程序，
所以我运行

npm run build

Run Code Online (Sandbox Code Playgroud)

我将 dist 文件夹上传到我的服务器，它在静态页面上工作正常，但如果在具有动态 url 的动态页面上，我收到以下错误

错误 404 - 页面未找到

你能帮我解决这个问题吗？

single-page-application vue.js vuejs2 nuxt.js

Ahm*_*bed

2018 03-22

1
推荐指数

1
解决办法

2831
查看次数

Laravel 社交名流 + vue spa 将访问令牌返回给客户端

如何将在社交名流回调中获得的访问令牌返回给客户端？我需要将此数据返回给 vue 以便用户登录。令牌数据

这是我在 vue 中获取重定向 url 的代码

googleLogin(){
      const self = this;

      let socialLogin = {
          name: 'google'
      };

      self.$http.post(`api/googleLogin`, socialLogin)
          .then(response => {
              console.log('GOOGLE LOGIN RESPONSE ', response.body);
              window.location = response.body;
          })

  }

Run Code Online (Sandbox Code Playgroud)

对于后端

 public function googleLogin(Request $request){

    $socialType = $request->name;

    return response()->json(
        Socialite::driver($socialType)
            ->with(['social_type' => $socialType])
            ->stateless()
            ->redirect()
            ->getTargetUrl()
    );
}

public function googleLoginCallback(){

    $http = new \GuzzleHttp\Client;

    $user = Socialite::with('google')->stateless()->user();

    $userCredentials = [
        'token' => $user->token,
        'refreshToken' => $user->refreshToken,
        'expiresIn' => $user->expiresIn,
    ];


    $response = …

Run Code Online (Sandbox Code Playgroud)

single-page-application vue.js laravel-socialite laravel-5.6

jdc*_*jdc

2018 08-23

1
推荐指数

1
解决办法

3411
查看次数

由于 CORS，Edge 对同一域的请求失败

我在 example.com 上的 SPA 应用程序服务器向 example.com/api 发出请求。AFAIK 这应该不需要任何access-control-allow-origin标题，因为来源和目标是相同的。

但是我收到以下错误；

SEC7120：[CORS] 源“ https://example.com ”在“ https:// ”处的跨源资源的 Access-Control-Allow-Origin 响应标头中未找到“ https://example.com ” example.com/iam/blablablabla '

此应用程序在 Chrome 或 Firefox 上完美运行。它仅在 Edge 上失败。有什么我在这里想念的吗？你能告诉我一些方向来理解我遇到的问题吗？

PS; 我继续在我的服务器上添加域作为允许的 CORS 来源。它也没有用。

cors single-page-application microsoft-edge

Has*_*san

2018 09-18

1
推荐指数

1
解决办法

2382
查看次数

为什么 MSAL loginPopup 响应“应用程序客户端请求资源上不存在的范围”？

（问题的继续：为什么我的 SPA 正在使用 Azure Active Directory 调用我的 WebAPI，收到“此请求的授权已被拒绝。”？）

我的客户端 SPA 正在尝试调用受保护的 WebAPI（服务）。客户端使用 MSAL（Micosoft 身份验证库）。问题发生在调用 API 之前，即在下图中的 1 和 2 之间。

这是客户

<!DOCTYPE html>
<html>
<head>
    <title>Quickstart for MSAL JS</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.2/js/msal.js"></script>
</head>
<body>
    <div class="container">
        <div>
            <button id="GetTodos" onclick="getTodos()">Get Todos</button>
        </div>
    </div>
    <script>

        var msalConfig = {
            auth: {
                clientId: 'xxxxxxxxxxxxxxxxxxxxxxx2427', 
                authority: "https://login.microsoftonline.com/my.tenant"
            },
            cache: {
                cacheLocation: "sessionStorage",
                storeAuthStateInCookie: true
            }
        };


        var requestObj = {
            // scopes: ["user.read"]
            scopes: ["access_as_user"]
        };

        var myMSALObj = new …

Run Code Online (Sandbox Code Playgroud)

azure access-token single-page-application azure-active-directory azure-ad-msal

rob*_*r78

2019 07-09

1
推荐指数

1
解决办法

2368
查看次数

应用程序在 UNMOUNTING 状态下死亡：无法读取未定义的属性“注入器”

我正在使用 Single-Spa-Angular 库构建微前端。我使用“ng add single-spa-angular”创建了三个不同的子应用程序，其中两个应用程序工作正常，但一个应用程序显示以下错误：

Uncaught app2: Application 'app2' died in status UNMOUNTING: Cannot read property 'injector' of undefined
    at http://<HOSTNAME>:4202/main.js:204363:53

Run Code Online (Sandbox Code Playgroud)

和

Uncaught app2: Application 'app2' died in status SKIP_BECAUSE_BROKEN: In this configuration Angular requires Zone.js
    at new NgZone (http://<HOST>:4202/main.js:68725:19)
    at getNgZone (http://<HOST>:4202/main.js:69414:13)
    at PlatformRef../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory (http://<HOST>:4202/main.js:69312:22)
    at http://<HOST>:4202/main.js:69356:59

Run Code Online (Sandbox Code Playgroud)

谁能帮我吗。

谢谢沙希·布山·维尔玛

single-page-application angularjs-injector angular micro-frontend

SHA*_*HAN

lucky-day

1
推荐指数

1
解决办法

6784
查看次数

标签助手显示重复的 GTM 标签

我有一个小网站，我使用Barba.js在页面之间创建平滑的过渡。因此，它不会完全加载新页面，而是使用 AJAX 在后台加载内容并将其添加到现有文档中。

因此，为了触发 Google 分析页面查看事件，我在 GTM 中使用历史更改触发器。而且似乎运行良好。在 GA 中，它正确记录页面浏览量。但在 Google Tag Assistant 中，它会不断增加每次页面加载时 GTM 标签的数量。我已经检查过它没有在页面加载时添加 GTM 标记。它仅向不包含 GTM 标记的文档添加主要内容容器。

这是第三页加载后的 TAG Assistant 屏幕截图：