Ошибка перекрестного происхождения между angular cli и flask - PullRequest
Новая
       3

Ошибка перекрестного происхождения между angular cli и flask

0 голосов
/ 20 февраля 2020

сначала я отправляю идентификатор пользователя и пароль от UI (angular) до flask

  public send_login(user){
           console.log(user)
           return 
     this.http.post(this.apiURL+'/login',JSON.stringify(user),this.httpOptions)
    .pipe(retry(1),catchError(this. 
     handleError))
     }

затем я получаю его от бэкэнда

ошибка бэкэнда

все операции работают нормально, но на консоли возникает ошибка перекрестного источника

Ошибка на консоли пользовательского интерфейса

опция http на стороне пользовательского интерфейса указана ниже 

constructor(private http: HttpClient) { }
  // Http Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': 'http://localhost:9000',
      'Access-Control-Allow-Methods': "GET,POST,OPTIONS,DELETE,PUT",
      'X-Requested-With': 'XMLHttpRequest',
      'MyClientCert': '',        // This is empty
      'MyToken': '' 
    })
  }

значения cors, объявленные на бэкэнде, указаны ниже 

cors = CORS(app, resources={r"/login": {"origins": "*"}})
 @app.route('/login', methods=['GET','POST'])
 def loginForm():
 json_data = ast.literal_eval(request.data.decode('utf-8'))
  print('\n\n\n',json_data,'\n\n\n')

Я не могу найти, где возникает проблема

Примечание: перекрестное происхождение, возникающее во время процесса входа в систему, в остальном последовательные шаги

Ответы [ 2 ]

0 голосов
/ 20 февраля 2020

Мне кажется, что вызов не покидает интерфейс (по крайней мере, по моему опыту, это так), потому что браузеры защищают это.

Создайте новый файл proxy.conf.json в src/ папка вашего проекта. 

{
  "/backendApiUrl": {      <--- This needs to reflect the server backend base path
    "target": "http://localhost:9000",    <-- this is the backend server name and port
    "secure": false,
    "logLevel": "debug"    <--- optional, this will give some debug output
  }
}

В файле angular.json (файл конфигурации CLI) добавьте следующую опцию proxyConfig к цели обслуживания: 

"projectname": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"      <--- this is the important addition
    },

Просто вызовите ng serve для запуска сервера dev с использованием этой конфигурации прокси.

Вы можете прочитать раздел Proxying to a backend server в https://angular.io/guide/build

Надеюсь, это поможет.

0 голосов
/ 20 февраля 2020

добавьте приведенный ниже код в ваш app.py 

CORS(app, supports_credentials=True)

и из внешнего интерфейса 

{with-credentials :true}

это позволит установить связь между внешним интерфейсом и бэкэндом

...