Прочитал множество способов включения «Access-Control-Allow-Origin», и ни один из них не помог мне.
Я использую модуль @ angular / common / http и внешний URL-адрес в качестве источника данных. при попытке получить данные вместо этого получить ошибку: ///// .................
Failed to load http://accounts.......com/accounts: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 503.
account.service.ts:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpParams } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Account } from '../models/account';
const baseUrl : string = 'http://accounts..................com/';
const httpOptions : any = {
headers: new HttpHeaders({
//'Content-Type': 'application/json',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Origin': '*'
})
};
@Injectable()
export class AccountService {
private isUserLoggedIn;
private usreName;
private account : Account;
constructor(
private http: HttpClient,
private router: Router
) {}
logIn (credentials: any): Observable<Account> {
return this.http.get<Account>(baseUrl + 'accounts');
}
}app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { routing } from './routing';
import { AppComponent } from './app.component';
import { AppGlobal } from './app.global';
import { AccountComponent } from './components/account/account.component';
@NgModule({
declarations : [
AppComponent,
AccountComponent,
....
],
imports : [
routing,
BrowserModule,
HttpClientModule,
CookieModule.forRoot()
],
providers : [AccountService, AppGlobal],
bootstrap : [AppComponent]
})
export class AppModule { }Помоги пожалуйста
//////////////// Пробовал исправить 1
//......
import { HttpHeaders} from '@angular/common/http';
//.......
logIn (credentials: any): Observable<Account> {
const headers = new HttpHeaders()
.append('Content-Type', 'application/json')
.append('Access-Control-Allow-Headers', 'Content-Type')
.append('Access-Control-Allow-Methods', 'GET')
.append('Access-Control-Allow-Origin', '*');
return this.http.get<Account>(baseUrl + 'accounts', {headers});
}
Я все еще получаю эту ошибку:
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:4200' is therefore not allowed access. The response had HTTP status code 503.
//////////////// Пробовал исправить 2
proxy.conf.json:
{
"/api": {
"target": "http://localhost:4200",
"secure": false,
"pathRewrite": {
"^/api": ""
},
"changeOrigin": true,
"logLevel": "debug"
}
}ng serve --proxy-config proxy.conf.json
также ошибка
@DavidAnthonyAcosta, Angular2 + - это клиентская библиотека, которая не используется для рендеринга на стороне сервера. Я использую только, полагаю, webpack-dev-server должен быть настроен
Нет, webpack не нужно настраивать для CORS. Angular я сопляю с клиентской библиотекой, это фреймворк. См. Ответ Аба Эбубе ниже. Как видите, он настраивает серверную часть cors, а НЕ клиентскую сторону.
@DavidAnthonyAcosta, я тоже использую node js, не думал, что node js нужно настраивать
Любой сервер, который вы используете, необходимо настроить. Если вы используете сервер NodeJS, вы можете использовать пакет npm под названием CORS, который позволяет вам довольно легко настроить его.
@DavidAnthonyAcosta, я npm установил ember-cli-cors, у меня это не сработало.
Это не тот. используйте этот: npmjs.com/package/cors. После его установки вам в основном нужно сообщить nodejs об этом с помощью параметров CORS: «Привет, NodeJS, пожалуйста, примите любой запрос от локальный: 4200». После этого вам должно быть хорошо идти
@DavidAnthonyAcosta, есть ли инструкция по настройке для angular / typescript?
Этот ответ может быть полезным: stackoverflow.com/a/58064366/7059557





Если вы используете .NET Api, добавьте это в свой файл WebApiConfig.cs.
public static void Register(HttpConfiguration config)
{
var enableCorsAttribute = new EnableCorsAttribute("*",
"Origin, Content-Type, Accept",
"GET, PUT, POST, DELETE, OPTIONS");
config.EnableCors(enableCorsAttribute);
// Web API configuration and services
// Configure Web API to use only bearer token authentication.
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/v1/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
вам необходимо установить пакет nuget Microsoft.AspNet.WebApi.Cors для этого
** Установите заголовки, чтобы разрешить происхождение CORS в Express **
=> Добавьте код в файл server.js или почтовый файл.
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();
});
CORS (Cross-Origin Resource Sharing) - это функция HTML5, которая позволяет одному сайту получать доступ к ресурсам другого сайта, несмотря на то, что он находится под разными доменными именами.
Спецификация W3C для CORS на самом деле довольно хорошо справляется с предоставлением некоторых простых примеров заголовков ответов, таких как заголовок ключа, Access-Control-Allow-Origin и другие заголовки, которые вы должны использовать для включения CORS на своем веб-сервере.
Я не использую ExpressJs
Вы должны включить CORS на сервере API (где разработан API). На каком сервере разработан API?
Я получил API с неизвестного сервера. Мне просто нужно использовать это
Я могу получать / видеть данные из API прямых ссылок, но не через Angular
Вы должны сообщить разработчику API, чтобы он включил CORS. Удачного кодирования
Отличное, счастливое кодирование
Access-Control-Allow-Origin
Заголовок ответа, а не заголовок запроса. Вы должны добавить этот заголовок на свой resfull (сервер)
Вы упомянули webpack-dev-server, который, конечно же, может обрабатывать CORS, поскольку он использует экспресс за кулисами. В конфигурации вашего веб-пакета
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
},
CORS должен быть включен сервером, с которого вы запрашиваете ресурс, а не Angular.