小编Cro*_*asr的帖子

我在浏览器的控制台中收到以下错误：

内容安全策略：页面的设置阻止了在http://localhost:3000/favicon.ico（“default-src”）处加载资源。

我在网上搜索，发现这应该用下面的代码片段来解决：

<meta http-equiv="Content-Security-Policy" content="default-src *;
    img-src * 'self' data: https: http:;
    script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
    style-src  'self' 'unsafe-inline' *">

我将此添加到我的前端app.component.html文件（我所有前端视图的父模板），但这并没有按预期工作。

我也因此尝试了多种排列无济于事。

我的前端在localhost:4200，后端在localhost:3000。

下面是来自我的后端服务器（中间件）的代码片段：

app.use(cors());
app.options('*',cors());
var allowCrossDomain = function(req,res,next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}
app.use(allowCrossDomain);

我现在还向我的后端 (Express) 服务器添加了以下中间件：

const csp = require('express-csp-header');

app.use(csp({
  policies: {
      'default-src': [csp.SELF, 'http://localhost:3000/', 'http://localhost:4200/' ],
      'script-src': [csp.SELF, csp.INLINE],
      'style-src': [csp.SELF],
      'img-src': ['data:', 'favico.ico'],
      'worker-src': [csp.NONE],
      'block-all-mixed-content': true …

我有（注意：用户名和密码是组成的）：

const CONNECTION_URL = "mongodb+srv://smith_bob:smith_bob@hotmail.com:T@llyHo!:@cluster0.r92qc.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
const PORT = process.env.PORT || 5000;

mongoose.connect(CONNECTION_URL,{useNewUrlParser: true, useUnifiedTopology: true})
    .then(()=>app.listen(PORT,()=> console.log(`Server running on port: ${PORT}`)))
    .catch((error)=> console.log(error.message));

但当我运行nodemon index.js时得到以下信息：

mondodb+srv URI 不能有端口号 \
[nodemon] 干净退出 - 重新启动前等待更改

有什么想法吗？

我尝试使用百分比编码字符，但出现如下错误：

. . . smith_bob:smith_bob@hotmail.com:%40@llyHo!: . . .

mongodb+srv URI 不能有端口号

. . . smith_bob%3Asmith_bob%40hotmail.com%3AT%40llyHo!%3A . . .

错误的身份验证：身份验证失败

. . . smith_bob:smith_bob%40hotmail.com%3AT%40llyHo!: . . .

密码包含未转义字符

. . . smith_bob:smith_bob@hotmail.com%3AT%40llyHo!: . . .

mongodb+srv URI 不能有端口号

解决方案：事实证明我需要将https ://localhost:3000 更改为http ://localhost:3000。（我的后续问题是为什么会出现这种情况，特别是当我的代码适用于https ://www.remoteserver.com/` 时）。

我在（Node.js/Express）有一个开发服务器https://localhost:3000和一个生产服务器https://www.remoteserver.com。我的客户位于https://localhost:4200（Angular）。

https://www.remoteserver.com我使用以下代码修复了跨源请求被阻止的问题：

var cors = require(cors());
app.use(cors());
app.options('*',cors());
var allowCrossDomain = function(req,res,next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();  
}
app.use(allowCrossDomain);

但是在我的开发服务器上使用相同的代码，https://localhost:3000我仍然面临 CORS 阻塞问题，而且我还无法摆脱这个问题。

上面的代码是否适用于生产服务器但不适用于开发服务器？

关于修复的任何想法或者我下一步应该尝试什么？

非常感谢！

我看到有很多关于这个主题的帖子，但我没有看到任何与 Express 和我的特定问题相关的帖子，即：

import * as express from 'express';
import { Request, Response, Application } from 'express';  // <-- Error here

给我一个错误（Module has no imported member对于'Request','Response'和'Application').

我看到子目录中列出了node_modules文件request.js、response.js和。根据错误跟踪，我的猜测是 Express 没有检查子目录。使用时如何强制/引导系统签入子目录？（或者这不是问题，而是存在另一个问题？）。application.js/lib/lib/libimport

我尝试过import { Request, Response, Application } from 'express/lib'，import * as expressLib from 'express/lib然后import {Request, Response, Application } from expressLib，但这些都不起作用。

注意：我在imports. 。。因为Request和Response …

我正在向表单中动态添加行，并希望每个新行都具有唯一的ID号。

我有以下代码来添加新组件（代表新行），但是我发现它component.instance仅包含新创建的组件的“常规”属性，而不包含用修饰的属性@Input()。有没有办法动态写入/修改@Input()属性？当动态创建一个组件时，自然会假设必须有一种直接的方式以某种方式提供@Input（）值！

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(thisType);
const component = this.subEnrollForm.container.createComponent(componentFactory);
component.instance.rowData.push(newRow); //rowData is a property in the
                                       dynamically-created component and 
                                       is decorated with @Input()

这是动态创建的组件：

export class SubEnrollFormRowComponent implements OnInit, DoCheck, OnChanges, AfterContentInit, AfterViewInit {
 @Input() rowData; 
  objKeys: Array<any> = [];
  subKeys: Array<any> = [];

我看到一个具有以下答案的旧帖子，但希望随后添加了新功能来解决此问题：

不能，Angular2绑定仅适用于静态添加到组件模板的组件和指令。

对于所有其他情况，请使用共享服务，如 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service中所述

您也可以使用

让componentRef = entryPoint.createComponent（componentFactory）; componentRef.instance.someProp ='someValue'; componentRef.instance.someObservableOrEventEmitter.subscribe（data => this.prop = data）;

后一种解决方案对我不起作用，也没有建议将组件转换为type <any>。我对上述services方法的解释是，我需要为孙子创建一个Observable，以监视祖父母何时尝试更新孙子的@Input（）属性，但是在我看来，这种方法对很多不必要的编码和开销来实现应该非常简单明了的东西（除非我缺少某些东西，这很有可能！）。如果有人可以通过相对简单的方法来初始化/动态修改以@Input装饰的孙子组件属性，请在此先感谢！

我正在尝试在功能组件中学习 React Hooks，并且正在学习React Hooks 教程，但收到错误：无法App在渲染不同组件 ( ) 时更新组件 ( UserTable)，并且错误堆栈表明这与中删除按钮的onClick={props.deleteUser(user.id)}属性。我看到几篇文章表明应该尝试使用useEffect()来解决这个问题，所以我尝试让deleteUser更新状态变量，然后让 useEffects 更改用户数组。虽然代码编译得很好，但页面只是挂起并最终因“内存不足”错误而超时（我认为是由于尝试渲染和重新渲染的无限循环造成的？）。有什么想法如何解决这种情况吗？UserTable.js

import React, { useState } from 'react';
import UserTable from './tables/UserTable';
import AddUserForm from './forms/AddUserForm';

const App= () =>  {

  const usersData = [
    {id: 1, name: "Tania", username: "floppydiskette"},
    {id: 2, name: "Craig", username: "siliconeidolon" },
    {id: 3, name: "Ben", username: "benisphere"}
  ]

   const [users, setUsers] = useState(usersData);

    const addUser = …