Как включить Access-Control-Allow-Origin для angular 5 / nodejs?

Прочитал множество способов включения «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});
}
Как включить Access-Control-Allow-Origin для angular 5 / nodejs?

Я все еще получаю эту ошибку:

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

также ошибка

CORS должен быть включен сервером, с которого вы запрашиваете ресурс, а не Angular.

David Anthony Acosta 30.05.2018 16:47

@DavidAnthonyAcosta, Angular2 + - это клиентская библиотека, которая не используется для рендеринга на стороне сервера. Я использую только, полагаю, webpack-dev-server должен быть настроен

aaaaaaaaax10 30.05.2018 16:55

Нет, webpack не нужно настраивать для CORS. Angular я сопляю с клиентской библиотекой, это фреймворк. См. Ответ Аба Эбубе ниже. Как видите, он настраивает серверную часть cors, а НЕ клиентскую сторону.

David Anthony Acosta 30.05.2018 16:58

@DavidAnthonyAcosta, я тоже использую node js, не думал, что node js нужно настраивать

aaaaaaaaax10 30.05.2018 17:02

Любой сервер, который вы используете, необходимо настроить. Если вы используете сервер NodeJS, вы можете использовать пакет npm под названием CORS, который позволяет вам довольно легко настроить его.

David Anthony Acosta 30.05.2018 17:02

@DavidAnthonyAcosta, я npm установил ember-cli-cors, у меня это не сработало.

aaaaaaaaax10 30.05.2018 17:04

Это не тот. используйте этот: npmjs.com/package/cors. После его установки вам в основном нужно сообщить nodejs об этом с помощью параметров CORS: «Привет, NodeJS, пожалуйста, примите любой запрос от локальный: 4200». После этого вам должно быть хорошо идти

David Anthony Acosta 30.05.2018 17:08

@DavidAnthonyAcosta, есть ли инструкция по настройке для angular / typescript?

aaaaaaaaax10 30.05.2018 17:16

Этот ответ может быть полезным: stackoverflow.com/a/58064366/7059557

AmirReza-Farahlagha 23.09.2019 16:12
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
5
9
73 560
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Если вы используете .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 для этого

Locke 04.07.2019 08:36
Ответ принят как подходящий

** Установите заголовки, чтобы разрешить происхождение 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

aaaaaaaaax10 30.05.2018 18:25

Вы должны включить CORS на сервере API (где разработан API). На каком сервере разработан API?

Vishal Maru 30.05.2018 18:33

Я получил API с неизвестного сервера. Мне просто нужно использовать это

aaaaaaaaax10 30.05.2018 18:36

Я могу получать / видеть данные из API прямых ссылок, но не через Angular

aaaaaaaaax10 30.05.2018 18:38

Вы должны сообщить разработчику API, чтобы он включил CORS. Удачного кодирования

Vishal Maru 30.05.2018 18:44

Отличное, счастливое кодирование

Vishal Maru 30.05.2018 18:57
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"
  }
},

Другие вопросы по теме