Angular：加载外部脚本或资源时出现 CORS 问题

Question

在我的 angular 应用程序下，我使用 renderer2 通过将它们注入 window

的头部来加载一些 javascript 资源

工作正常，但是 ;

在本地服务时，加载资源失败，因为存在 CORS 问题：

Access to XMLHttpRequest at 'https://website/src/style1.css' from origin 'http://192.168.244.128:3001' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

注意：我是运行我的 Angular 应用程序在我的本地机器上，但我正在使用一些 url 重定向，因为它是一个 vmware 虚拟机，这就是为什么我的本地 url 是：http://192.168.244.128:3001

我试过像这样使用 Angular 代理 :

proxy.conf.json :

{
  "/*": {
    "target": "https://website/src/style1.css",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

但问题依旧

建议??

Answer 1

目标应该是域服务器 + 端口但不是直接资源路径

"target": "https://{domain}:{port}"

我还建议您使用 url 关键字来识别外部请求（在下面的示例中我选择“资源”）

如果你想访问示例

https://website/src/style1.css

您必须通过

访问它

localhost:{localport}/resources/src/style1.css 或 resources/src/style1.css

这里是代理配置

{
    "/resources/*": {
      "target": "https://website",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {
        "^/resources": ""
      },
      "logLevel": "debug"
    }
  }

Angular：加载外部脚本或资源时出现 CORS 问题

Angular : CORS problem when loading external script or ressource

javascript

angular

typescript

cors