Question

我在服务器上有一个JSON文件。我想将其加载到我的angular-typescript中。我尝试了以下方法。

ngOnInit () {
  this.httpService
    .get("http://x.x.x.x/config_files/test/config.json")
    .subscribe(data => console.log(data));
}

刷新页面时出现以下错误

CORS策略已阻止从来源“ http://x.x.x.x/config_files/test/config.json”访问“ http://localhost:4200”处的XMLHttpRequest：请求的资源上没有“ Access-Control-Allow-Origin”标头。

由于没有服务器端API，因此无法添加标头Access-Control-Allow-Origin。如何解决该问题？

Answer 1

您可以使用某些插件来解决CORS问题，其中一个是Moesif Origin & CORS Changer，提供的链接用于chrome扩展。

安装插件后，只需切换ON开关并刷新您的应用即可。该插件允许您发送跨域请求。您还可以覆盖请求来源和CORS标头。

Answer 2

CORS主要是一个后端问题。您可以使用以下代码在Node.js上解决该问题：

var express = require('express');
var app = express();
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

但是，如果您想在前端解决它，则可以在Angular中使用这种代码。将此代码放入proxy.conf.json中（但请注意，斜杠足以使其不起作用）：

{
  "/config_files/*": {            <-- you may change this for config_files/test/
      "target": "http://xxxxxx:<port>",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true
  }
}

package.json中的以下内容：

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    ...
}

并在angular.json中添加代理配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "event:build",
    "proxyConfig": "proxy.conf.json"  <-- this line
  },...

从npm start开始。

它应该在您的情况下有效，但是在其他情况下（当然不是在产品中），我发现暂时为Chrome或Firefox使用扩展名会更容易。我还发现，由于某些限制，它可能无法在Chromium和Chrome Canary中使用。

使用URL加载外部JSON文件

2 个答案: