запрос перекрестного происхождения заблокирован cors - PullRequest
Новая
       47

запрос перекрестного происхождения заблокирован cors

0 голосов
/ 02 мая 2020

Я создал приложение реагирования, подключенное к серверу узлов, когда я развернул свой сервер и базу данных (не приложение внешнего интерфейса) с помощью heroku. Я начал получать сообщение об ошибке из-за политики cors, говорящей, что «Доступ к выборке в» https://my-server-url.herokuapp.com/register 'from origin' http://localhost: 3000 'заблокировано политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Если непрозрачный ответ обслуживает ваш необходимо установить режим запроса 'no-cors', чтобы получить ресурс с отключенным CORS. "

Я пробовал некоторые случайные вещи, но ничего не помогло, пожалуйста, помогите мне с этим, вот мой код сервера 

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const bcrypt = require('bcrypt');
const register = require('./Controllers/register');
const signIn = require('./Controllers/signIn');
const Image = require('./Controllers/image');

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


const app = express();



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

app.use(function (req, res, next) {

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*');

});

app.get('/', (req, res) => res.send('working'))
app.post('/signin', (req, res) => {signIn.handleSignIn(req, res, db, bcrypt)})
app.post('/register', (req, res) => {register.handleRegister(req, res, db, bcrypt)})
app.put('/image', (req, res) => {Image.handleImage(req, res, db, bcrypt)})


app.listen(process.env.PORT || 3001, () => console.log(`App listening on ${process.env.PORT}`));

, и вот где я делаю запрос 

import React from 'react';

import '../SignIn/SignIn.css';

class Register extends React.Component {

constructor(props){
    super(props)
    this.state = {
        email: '',
        password: '',
        name: ''
    }
}


onEmailChange = (event) => {
    this.setState({email: event.target.value})
}

onPasswordChange =  (event) => {
    this.setState({password: event.target.value})
}

onNameChange =  (event) => {
    this.setState({name: event.target.value})
}

onRegister = () => {
    fetch('https://my-server-url.herokuapp.com/register', {
        method: 'post',
        headers: {'content-type': 'application/json'},
        body: JSON.stringify({
            email: this.state.email,
            password: this.state.password,
            name: this.state.name
        })
    }).then(res => res.json())
      .then(user => {
          if(user.id) {
            this.props.loadUser(user)
            this.props.RouteChange('home');
          }
      })
}



render() {
return(
    <div className='main2'>
        <h2>Register</h2>

        <label className='label'>Name</label>
        <input onChange={this.onNameChange} className='input' type='name'/>

        <label className='label'>Email</label>
        <input onChange={this.onEmailChange} className='input' type='email'/>

        <label className='label'>Password</label>
        <input onChange={this.onPasswordChange} className='input' 
type='Password'/>

        <button onClick={this.onRegister}>Register</button>

    </div>
);
}
}

export default Register;

вот обработчик запроса на регистрацию 

const handleRegister = (req, res, db, bcrypt) => {
const { name, email, password } = req.body;

if(!email || !name || !password){
    return res.status(400).json('incorrect form submission')
}

const saltRounds = 10;

const salt = bcrypt.genSaltSync(saltRounds);

const hash = bcrypt.hashSync(password, salt)

db.transaction(trx => {
  trx.insert({
        hash: hash,
        email: email
    }).into('login')
    .returning('email')
    .then(loginEmail => {
        return trx('users')
        .returning('*')
        .insert({
            name: name,
            email: loginEmail[0],
            joined: new Date()
        })
        .then(user => {
            res.json(user[0])
        }).catch(err => res.json(err))
    })
    .then(trx.commit)
    .catch(trx.rollback)
})


}

module.exports = {
handleRegister: handleRegister
};

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

По умолчанию Heroku устанавливает все зависимости, перечисленные в пакете. json в разделе зависимости и devDependencies.

После выполнения шагов установки и сборки Heroku удаляет пакеты, объявленные в devDependencies, перед развертыванием приложения.

Возможно, некоторые из ваших пакетов находятся в devDependencies вместо зависимостей, и поэтому выполнение вашего кода на стороне сервера не выполняется?

0 голосов
/ 02 мая 2020

Вы можете попытаться включить указанный c маршрут и проверить: 

app.get('/', cors(), (req, res) => res.send('working'))
app.post('/signin', cors(), (req, res) => {signIn.handleSignIn(req, res, db, bcrypt)})
app.post('/register', cors(),(req, res) => {register.handleRegister(req, res, db, bcrypt)})
app.put('/image', cors(), (req, res) => {Image.handleImage(req, res, db, bcrypt)})
...