Блог

Главная - Вопросы по программированию - Как решить ошибку CORS в React и Node / Express

Как решить ошибку CORS в React и Node / Express

#javascript #node.js #reactjs #cors

#javascript #node.js #reactjs #cors

Вопрос:

Я использую React во внешнем интерфейсе и node / express server во внутреннем интерфейсе, и раньше проект работал нормально, но теперь я получаю ошибку CORS

Доступ к выборке в ‘https://dry-reef-22080.herokuapp.com/imageUrl ‘ из источника’https://smart-brain-04.herokuapp.com ‘ был заблокирован политикой CORS: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса на ‘no-cors’, чтобы получить ресурс с отключенным CORS

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

 fetch(`https://dry-reef-22080.herokuapp.com/imageUrl`, {
      method: "post",
      mode: "no-cors",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-type": "application/json"
      },
      body: JSON.stringify({
        input: this.state.input
      })
    })

Я получаю доступ к другому внешнему API под названием clarifail в серверной части

 const Clarifai = require('clarifai');

const app = new Clarifai.App({
    apiKey: 'XYZ'
   });

const handleImageUrl = (req, res) => {
   app.models.predict(
    'c0c0ac362b03416da06ab3fa36fb58e3',
    req.body.input)
    .then(data => {
        res.json(data);
    })
   }

я также пытался использовать пакет npm cors, но проблема все еще сохраняется

 const express = require('express');
const bcrypt = require('bcrypt-nodejs');
const cors = require('cors');
const knex = require('knex');

const Register = require('./Controllers/Register');
const signin = require('./Controllers/signin');
const profileget = require('./Controllers/profileget');
const image = require('./Controllers/image');

process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0

const db = knex({
    client: 'pg',
    connection: {
      connectionString: process.env.DATABASE_URL,
      ssl: true
    }
  });

const app = express();

app.use(cors())
app.use(express.json());

Комментарии:

1. no-cors скорее всего, это не то, что вы хотите. Я написал сообщение в блоге об этом. Итак, удалите no-cors и поделитесь, какая ошибка появляется в консоли.

2. Это ошибка:— Доступ к выборке в ‘ dry-reef-22080.herokuapp.com/imageUrl ‘ from origin ‘ localhost: 3000 ‘ был заблокирован политикой CORS: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса на ‘no-cors’, чтобы получить ресурс с отключенным CORS.

3. если dry-reef-22080.herokuapp.com ваш, вам нужно добавить конфигурацию CORS, если она не ваша, тогда вам нужно получить к ней доступ через ваш сервер, а не через клиент

4. кроме того, не добавляйте заголовки ответов в качестве заголовков запросов … Access-Control-Allow-Origin является заголовком ответа и не принадлежит запросу

5. да dry-reef-22080.herokuapp.com мой сервер, который я развернул на heroku

Ответ №1:

Попробуйте установить режим из выборки в cors, поскольку вы используете модуль cors npm в своем серверном модуле, вы также должны использовать cors для вашего запроса, отправляемого на серверную часть. Это должно выглядеть примерно так:

 fetch(`https://dry-reef-22080.herokuapp.com/imageUrl`, {
  method: "post",
  mode: "cors",
  headers: {
    "Content-type": "application/json"
  },
  body: JSON.stringify({
    input: this.state.input
  })
})