Angular 否'；访问控制允许原点'；角2应用程序中的标题

对于这个项目，我只是学习和练习Angular 2。我没有服务器端，正在向

我想知道是否有可能绕过cors问题。我对这一切还相当陌生，所以非常感谢婴儿步骤指导！我正在使用

http://localhost:8080

错误消息：（api键已注释掉）

XMLHttpRequest无法加载http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&symbol=GOOG&type=daily&startDate=20150311000000. 对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。起源'http://localhost:8080因此，不允许访问。

股票信息服务：

import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class StockInformationService {
    private apiRoot = "http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&";

    constructor (private _http: Http) {}

    getData(symbol: string): Observable<any> {
        // Tried adding headers with no luck
        const headers = new Headers();
        headers.append('Access-Control-Allow-Headers', 'Content-Type');
        headers.append('Access-Control-Allow-Methods', 'GET');
        headers.append('Access-Control-Allow-Origin', '*');

        return this._http.get(this.apiRoot + "symbol=" + symbol + "&type=daily&startDate=20150311000000", {headers: headers})
            .map(response => response.json());
    }
}

在我的控制台中，requestData错误：

---

错误：[object object]

不幸的是，这不是Angular2错误，这是您的浏览器遇到的错误（即，在您的应用程序之外）

---

在您发出任何请求之前，必须将CORS头添加到服务器上的该端点

您可以从这里了解更多信息：

您的资源方法不会被命中，因此它们的头永远不会被设置。原因是在实际请求之前有所谓的飞行前请求，这是一个选项请求。因此，错误来自飞行前请求没有生成必要的头的事实。 检查是否需要在.htaccess文件中添加以下内容：

Header set Access-Control-Allow-Origin "*"

---

我也遇到了同样的问题，通过下面的方法解决了这个问题

步骤1：

$ npm install --save-dev http-proxy-middleware

步骤2：

在获取web api时添加代理，如果使用lite server，则可以添加一个文件bs-config.js

//file: bs-config.js
var proxyMiddleware = require('http-proxy-middleware');

module.exports = {
    server: {
        middleware: {
            1: proxyMiddleware('/example-api', {
                target: 'http://api.example.com',
                changeOrigin: true,
                pathRewrite: {
                '^/news-at-api': '/api'
                }
            })
        }
    }
};

---

希望这能有所帮助。

我在使用mock.io响应头时也遇到了同样的问题：访问控制允许源代码*

要添加它，只需单击“高级选项”

---

完成后，我的应用程序就能够从外部域检索数据。

这是服务器上CORS配置的问题。目前尚不清楚您使用的是哪台服务器，但如果您使用的是Node+express，则可以使用以下代码解决此问题

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

---

这段代码是一个非常类似的问题的答案。

另一种简单的方法，不需要安装任何东西

HTTP函数

authenticate(credentials) {

let body = new URLSearchParams();
body.set('username', credentials.username);
body.set('password', credentials.password);

return this.http.post(/rest/myEndpoint, body)
  .subscribe(
  data => this.loginResult = data,
  error => {
    console.log(error);
  },
  () => {
  // function to execute after successfull api call
  }
  );
 }

创建proxy.conf.json文件

{
 "/rest": {
"target": "http://endpoint.com:8080/package/",
"pathRewrite": {
  "^/rest": ""
},
"secure": false
}
}

然后

ngserve--proxy-config proxy.conf.json

（或） 打开package.json并替换

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

然后

npm启动

就这样

---

如果您正在使用一个免费的REST和SOAP请求和响应测试工具，为Angular 2+应用程序创建一个模型，请在此处查看更多选项

 Access-Control-Allow-Origin :  *

我添加了两个图像以帮助您插入。 第一个显示您应该添加的标题。如果要在单击加号按钮（绿色）之前添加标题

第二幅图显示了插入*。值*允许接受来自不同主机的所有请求

在这项工作之后，我的Angular应用程序删除了我控制台中这个恼人的错误

---

帮助我理解创建第一个模型的一个重要方法是。它将帮助您在没有服务器端的SoapUi环境中创建新的模型。

只需在

php

文件中设置为

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

---

我得到了同样的错误，这里我是如何解决它的，通过在spring控制器中添加以下内容：

@CrossOrigin(origins = {"http://localhost:3000"})

---

我花了很多时间寻找解决方案，最后通过在服务器端进行更改使其得以运行。请查看网站

当我在服务器端启用corse时，它对我起了作用。我们在API中使用Asp.Net内核，下面的代码起了作用

1） 在Startup.cs的ConfigureServices中添加了Addcors

public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();
        services.AddMvc();
    }

2） 在配置方法中添加了UseCor，如下所示：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseCors(builder =>builder.AllowAnyOrigin());
        app.UseMvc();
    }

---

我在练习安格拉时也遇到了同样的问题。然后我遇到了帮助我解决问题的问题

---

我在请求映射方法上保留了

@CrossOrigin（exposedHeaders=“accesscontrolalloworigin”）

。我们还可以在spring boot应用程序中全局配置此功能。

大多数情况下，这是由于服务器的响应类型无效造成的

请确保遵守以下2条以避免此问题

您不需要在角度侧设置任何CORS标头。它非常清楚如何处理它。Angular希望返回数据为json格式。因此，即使对于OPTIONS请求，也要确保返回类型是JSON

您可以在服务器端通过使用CORS头来处理CORS，这是非常不言自明的，或者您可以通过谷歌搜索如何设置CORS头或中间件

---

这是服务器配置，setup config.addAllowedHeader（“*”）；在CorsConfiguration中。

您可以添加您使用的服务器吗？这不是angular2错误，而是服务器的CORS配置问题，如果您说您使用的是哪台服务器（apache、node+express等），您可能会得到更具体的响应。我可以用node+expression解决这个错误。这个答案可能有用：听起来很奇怪，但我不需要在服务器端做任何更改。AngularUI项目有两个分支，一个在工作，另一个没有。我还没有找到结论性的答案。关于如何做到这一点有什么想法吗？错了，它不能添加到服务器端，您只需要通过添加正确的头来修改您的请求。您无法访问您向其发出请求的每台服务器。这是有误导性的。在spring boot@Ezequiel？Hi@LahiruGamage中如何做到这一点，

@CrossOrigin（exposedHeaders=“Access Control Allow Origin”）

在请求映射方法上对我起了作用。这基本上帮助了我：

res.header（“Access Control Allow Origin”，”

由于您允许所有域控制您的后端，这个解决方案不是很糟糕吗。如果有人联系了t怎么办

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseCors(builder =>builder.AllowAnyOrigin());
        app.UseMvc();
    }