Как включить Access-Control-Allow-Origin для угловых 5 / nodejs? - PullRequest
Новая
       21

Как включить Access-Control-Allow-Origin для угловых 5 / nodejs?

0 голосов
/ 30 мая 2018

Прочитайте много способов для включения '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});
}
enter image description here

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

Ответ на предпечатный запрос не проходит контроль доступапроверка: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin».Origin 'http://localhost:4200' поэтому не разрешен доступ.Ответ имеет HTTP-код состояния 503.

//////////////// Пробное исправление 2

прокси.conf.json: 

{
  "/api": {
    "target": "http://localhost:4200",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

ng serve --proxy-config proxy.conf.json

также ошибка

Ответы [ 4 ]

0 голосов
/ 30 мая 2018

Вы упомянули webpack-dev-server, который, конечно, может обрабатывать CORS, так как он использует экспресс за кулисами.В вашем конфиге webpack 

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"
  }
},
0 голосов
/ 30 мая 2018

** Установить заголовки, чтобы разрешить 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Совместное использование) - это функция HTML5, которая позволяет одному сайту получать доступ к ресурсам другого сайта, несмотря на то, что он находится под разными доменными именами.

Спецификация W3C для CORS на самом деле довольно неплохо работает, предоставляя несколько простых примеров заголовков ответов, таких какв качестве заголовка ключа Access-Control-Allow-Origin и других заголовков, которые необходимо использовать для включения CORS на вашем веб-сервере.

0 голосов
/ 30 мая 2018 
Access-Control-Allow-Origin

Является ли заголовок ответа не заголовком запроса.Вы должны добавить этот заголовок в свой resfull (сервер)

0 голосов
/ 30 мая 2018

Если вы используете .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 }
        );
    }
}
...