Обработка исключения «Доступ к выборке заблокирован политикой CORS» в приложении React, подключающемся к Azure Cosmos DB (SQL API) - PullRequest
Новая
       11

Обработка исключения «Доступ к выборке заблокирован политикой CORS» в приложении React, подключающемся к Azure Cosmos DB (SQL API)

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

Я пытаюсь создать очень простое React-приложение, которое будет подключаться к Azure Cosmos DB и позволит пользователю выполнять простые задачи, такие как поиск в базе данных. Я использую SQL API CosmosDB, а не MongoDB, и у меня возникают проблемы с подключением моего приложения к CosmosDB. На данный момент это просто простая веб-страница с кнопкой подключения, которая при нажатии пытается создать базу данных, если она не существует, а затем создать контейнер в этой базе данных. Мой код выглядит следующим образом (конечная точка и ключ намеренно пропущены): 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const CosmosClient = require('@azure/cosmos').CosmosClient;

class App extends Component {

  constructor() {
    super();
    this.state = {    
      client : new CosmosClient({
        endpoint: "my-endpoint",
        key: "my-primary-key"
      }),
      databaseID : "My-db-name",
      containerID : "My-db-container"
    };
    this.connect = this.connect.bind(this);
    this.init = this.init.bind(this);
  }

  connect() {
    this.init(err => {
      console.error(err);
    })
    .catch(err => {
      console.error(err);
      console.error(
        'Shutting down because there was an error setting up the database.'
      );
    });
  }

  async init() {
    const dbResponse = await this.state.client.databases.createIfNotExists({
        id: this.state.databaseID
    });
    const coResponse = await dbResponse.database.containers.createIfNotExists({
        id: this.state.containerID
    });
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </div>
        <button className="Connect-Button" onClick={this.connect}>
          Connect to Azure
        </button>
      </div>
    );
  }
}

export default App;

Когда я нажимаю кнопку «Подключиться к Azure», я получаю следующие ошибки:

"Доступ к извлечению в 'https://react-test-db.documents.azure.com/" из источника "http://localhost: 3000 ' был заблокирован политикой CORS: Ответ на запрос перед полетом не проходит проверку контроля доступа : На запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Если непрозрачный ответ удовлетворяет ваши потребности, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS. "

Наряду с: «GET https://react-test-db.documents.azure.com/ net :: ERR_FAILED» и «TypeError: Failed to fetch» ​​

Я попытался включить CORS, как предложено в https://medium.com/@alexishevia / using-cors-in- express -cac7e29b005b , но это, похоже, ничего не дает.

На портале Microsoft Azure есть вкладка CORS, которая позволяет вам добавить домены для совершения звонков из разных источников в вашу БД. Однако localhost: 3000 / является «недопустимым источником» и не допускается. Это как-то связано с этим? Или что-то не так с моим кодом?

1 Ответ

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

Вы пытались использовать IP-адрес вашей машины вместо localhost? Если у вас машина типа UNIX, IP-адрес можно узнать с терминала с помощью команды ifconfig.

...