IONIC 3 CORS НОМЕР

У меня возникла проблема с CORS в Ionic 3 при попытке выполнить вызовы GET для API. Я использую локальный сервер Ionic, работающий в командной строке для сервера live.

Ошибка Нет запрашиваемого ресурса в заголовке 'Access-Control-Allow-Origin'. Источник 'http://localhost:8100', следовательно, не имеет доступа.

Я попытался обновить ionic.config.json с настройкой прокси-сервера, но это, похоже, не работает..

{
  "name": "projectLeagueApp",
  "app_id": "47182aef",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path":"/games",
      "proxyUrl": "https://api-2445582011268.apicast.io/games/"
    }
  ]
}

Моя служба данных

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class DataProvider {

  headers = new Headers({'user-key': '1234567890123'});
  options = new RequestOptions ({headers: this.headers}); 
  limit: number = 50;

  constructor(public http: Http) {
    console.log('Hello DataProvider Provider');
  }

  getGames(genre, offset_num) {

    let genre_id = genre;
    let offset = offset_num;

    return this.http.get('https://api-2445582011268.apicast.io/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options)
  }

}

Я пытаюсь звонить на этот API

URL запроса

https://api-2445582011268.apicast.io
HEADERS
Key Value
user-key    YOUR_KEY
Accept  application/json

Основной вопрос Мои звонки не работают. Как мне создать прокси для этой проблемы?

Ответ 1

Чтобы устранить эту проблему, измените следующие строки

ionic.config.json

{
  "name": "projectLeagueApp",
  "app_id": "47182aef",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path":"/games",
      "proxyUrl": "https://api-2445582011268.apicast.io/games"
    }
  ]
}

Вам нужно удалить "/", который находится в конце "proxyUrl".

Моя служба данных

return this.http.get('/games/?fields=name,release_dates,screenshots&limit='+this.limit+'&offset='+offset+'&order=release_dates.date:desc&filter[genres][eq]='+genre_id+'&filter[screenshots][exists]', this.options)

В http-вызове URL должен начинаться с '/games'. '/games', потому что ионный будет прокси-сервером http://localhost:<port>/games на https://api-2445582011268.apicast.io/games

Используйте вышеуказанный метод для внешних вызовов GET и POST в приложении.

Спасибо.

Ответ 2

Если вы хотите использовать для тестирования в Chrome, просто установите расширение Chrome Разрешить управление происхождением Быстрый и простой способ

Ответ 3

Для тестирования в среде разработки вы можете запустить Google Chrome в режиме disable-web-security.

Шаги, чтобы следовать (В Windows)

Нажмите клавишу Windows + R, чтобы открыть окно Run.
Введите/введите следующую команду и нажмите клавишу Enter.

chrome.exe --user-data-dir="C: /Chrome dev session" --disable-web-security

Шаги, чтобы следовать (На Ubuntu)

Убейте все экземпляры chrome.exe прежде чем запускать/запускать его.

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

До Chrome 48

chromium-browser --disable-web-security

Шаги, чтобы следовать (На Mac)

Запустите следующую команду в терминале.

open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir http://localhost:8100 / --disable-web-security

Ответ 4

функция прокси-сервера ожидает, что вы ссылаетесь на локальный сервер. в вашем запросе GET вы по-прежнему указываете на удаленный API. Если вы измените свой код на this.http.get('/games/...' он должен начать функционировать, так как запрос отправится на http://localhost:8100/games..., который имеет опцию "proxy" поймают и передадут URL, который вы указали.

Вам также может потребоваться установить https://api-2445582011268.apicast.io в поле proxyUrl. Я думаю, что остальная часть пути - сквозная.

Ответ 5

функция экспорта getAuthHttp (http: Http, параметры: RequestOptions) { console.log( "маркер", storage.get( 'id_token'));

вернуть новый AuthHttp (новый AuthConfig ({

      headerName: 'Authorization',
      headerPrefix: 'bearer',          
      tokenName: 'id_token',
      tokenGetter: (() => storage.get('id_token')),
      noJwtError: true,    
      //globalHeaders: [{'Accept': 'application/json'}],
      globalHeaders: [{'Content-Type':'application/json'},{"Access-Control-Allow-Origin": "*"}],

    }), http, options);

}

Ответ 6

Вы можете обработать CORS при отладке в браузере, используя расширение CORS или отключив безопасность Chrome. Но вам нужно обрабатывать CORS, когда вы отлаживаете приложение на стороне сервера, я использовал API woo-commerce, поэтому я отредактировал его как follows->

1. Plugins-> editor-> woocomerceapi

сразу после

<?php**
header("Access-Control-Allow-Origin: *");

2. Обновить файл