Нет заголовка "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*
, чтобы добавить его там просто нужно нажать на дополнительные параметры
Как только это будет сделано, мое приложение сможет получить данные из внешнего домена.
просто вы можете установить в как
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 : *
Я добавляю два изображения для помощи вашей вставки. Первый показывает заголовок, который вы должны добавить. Если вы хотите добавить заголовок, прежде чем нажать кнопку "плюс" (она зеленая).
второе изображение показывает вставить *. Значение * позволяет принимать все запросы от разных хостов.
после этой работы мое Угловое приложение удалило эту раздражающую ошибку в моей консоли.
большой ресурс, который помог мне понять для создания моего первого макета, - это видео. Это поможет вам создать новый макет внутри среды SoapUi без серверной части.
У меня была такая же проблема, когда я практиковал Angular5. Затем я наткнулся https://spring.io/guides/gs/rest-service-cors/ что помогло мне решить проблему.
Я хранил @CrossOrigin(exposedHeaders="Access-Control-Allow-Origin")
по моему методу отображения запроса. Мы также можем настроить это глобально в приложении spring boot.
еще один простой способ, без установки каких-либо
-
функция 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 } ); }
-
создать прокси-сервер.conf.файл json
{ "/rest": { "target": "http://endpoint.com:8080/package/", "pathRewrite": { "^/rest": "" }, "secure": false } }
-
затем
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"})