Нет заголовка "Access-Control-Allow-Origin" в приложении Angular 2

для этого проекта я просто изучаю и практикую Angular 2. У меня нет серверной части, и я делаю запросы API к barchart OnDemand api .

мне интересно, можно ли обойти проблему cors. Я все еще довольно новыми для всего этого, так что ребенок вам очень признателен! Я использую http://localhost:8080.

сообщение об ошибке: (ключ api прокомментирован)

XMLHttpRequest cannot load http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&symbol=GOOG&type=daily&startDate=20150311000000. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

StockInformationService:

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());
    }
}

Приложение Компонент:

import {Component} from "angular2/core";
import {VolumeComponent} from '../../components/volume/volume';
import {StockInformationService} from '../../core/stock-information.service';

@Component({
    selector: 'app-shell',
    template: require('./app-shell.html'),
    directives: [VolumeComponent],
    providers: [StockInformationService]
})
export class AppShell {
    constructor(private _stockInformationService: StockInformationService) {}

    // In my template, on button click, make api request
    requestData(symbol: string) {
        this._stockInformationService.getData(symbol)
            .subscribe(
                data => {
                    console.log(data)
                },
                error => console.log("Error: " + error)
            )}
    }

}

в моей консоли ошибка requestData: Error: [object Object]

11 ответов


это проблема с конфигурацией 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();
});

этот код был ответ @jvandemo к очень похожему вопросу.


вы можете прочитать больше об этом здесь: http://www.html5rocks.com/en/tutorials/cors/.

ваши методы ресурсов не будут поражены, поэтому их заголовки никогда не будут установлены. Причина в том, что перед фактическим запросом, который является запросом опций, существует так называемый запрос предполетной подготовки. Таким образом, ошибка возникает из-за того, что запрос preflight не создает необходимые заголовки. проверьте, что вам нужно будет добавить следующее .реврайт файл:

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

У меня также была такая же проблема при использовании http://www.mocky.io/ то, что я сделал, это добавить в макет.заголовок ответа ввода-вывода: Access-Control-Allow-Origin*

, чтобы добавить его там просто нужно нажать на дополнительные параметры

Mock.io Header Example Как только это будет сделано, мое приложение сможет получить данные из внешнего домена.


просто вы можете установить в как

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

к сожалению, это не ошибка Angular2, это ошибка, с которой работает ваш браузер (т. е. вне вашего приложения).

этот заголовок CORS должен быть добавлен к этой конечной точке на сервере, прежде чем вы сможете сделать какие-либо запросы.


Я также столкнулся с той же проблемой и прошли следующий путь решения этой проблемы.

Шаг 1:

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

Шаг 2:

добавить прокси когда я получаю веб-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'
                }
            })
        }
    }
};

надеюсь, что это помогает.


Я потратил много времени на решение и получил его, наконец, путем внесения изменений на стороне сервера.Проверяем сайт https://docs.microsoft.com/en-us/aspnet/core/security/cors

это сработало для меня, когда я включил corse на стороне сервера.Мы использовали Asp.Net ядро в API и приведенный ниже код работали

1)добавлены Addcors в ConfigureServices запуска.cs

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

2) добавлены UseCors в Configure метод как ниже:

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

Если вы создаете макет с SoapUI, бесплатный инструмент тестирования для REST и SOAP запроса и ответа, для приложения Angular 2+ вы должны помнить, чтобы установить внутри вашего HTTP-запроса заголовка

 Access-Control-Allow-Origin :  *

Я добавляю два изображения для помощи вашей вставки. Первый показывает заголовок, который вы должны добавить. Если вы хотите добавить заголовок, прежде чем нажать кнопку "плюс" (она зеленая).

First image

второе изображение показывает вставить *. Значение * позволяет принимать все запросы от разных хостов.

Second image

после этой работы мое Угловое приложение удалило эту раздражающую ошибку в моей консоли.

error inside console

большой ресурс, который помог мне понять для создания моего первого макета, - это видео. Это поможет вам создать новый макет внутри среды SoapUi без серверной части.


У меня была такая же проблема, когда я практиковал Angular5. Затем я наткнулся https://spring.io/guides/gs/rest-service-cors/ что помогло мне решить проблему.

Я хранил @CrossOrigin(exposedHeaders="Access-Control-Allow-Origin") по моему методу отображения запроса. Мы также можем настроить это глобально в приложении spring boot.


еще один простой способ, без установки каких-либо

  1. функция 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
      }
      );
     }
    
  2. создать прокси-сервер.conf.файл json

    {
     "/rest": {
    "target": "http://endpoint.com:8080/package/",
    "pathRewrite": {
      "^/rest": ""
    },
    "secure": false
    }
    }
    
  3. затем ng serve --proxy-config proxy.conf.json (или) открыть пакет.JSON и заменить

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

а то npm start

вот именно.

регистрация здесь https://webpack.github.io/docs/webpack-dev-server.html дополнительные опции


Я получил ту же ошибку и вот как я ее решил, добавив следующее к вашему контроллеру spring:

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