跨域請求被 cors 阻止

Question

當我使用 heroku 部署我的服務器和數據庫（不是前端應用程序）時，我已經構建了一個連接到節點服務器的反應應用程序，我開始收到 cors 政策的錯誤，說“訪問在 ' Z5E056C500A1C4B6A7110-BADE-ZURL8獲取.herokuapp.com/register ' from origin ' http://localhost:3000 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs ，將請求的模式設置為 '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
};

Answer 1

您可以嘗試啟用特定路由並檢查：

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)})

Answer 2

默認情況下，Heroku 將安裝在依賴項和 devDependencies 下的 package.json 中列出的所有依賴項。

運行安裝和構建步驟后，Heroku 將在部署應用程序之前刪除 devDependencies 下聲明的包。

可能是您的某些包位於 devDependencies 而不是依賴項中，因此您在服務器端的代碼執行失敗？