与Express进行后期要求时，要与“相同政策”的CORS进行斗争

如何解决与Express进行后期要求时，要与“相同政策”的CORS进行斗争

我想在我的网站上创建一个新帐户时遇到问题。作为localhost托管时，一切正常，但在AWS上托管后，我就遇到了著名的Same-Policy CORS问题。

要创建一个帐户，我有一个OPTIONS请求和一个POST请求。 OPTIONS请求为空，经过几分钟的等待，我终于收到了跨域故障警报。但是，当我尝试登录现有帐户（使用PhpMyAdmin创建）时，OPTIONS和POST请求工作正常。

另外，如果我使用数据库中已有的电子邮件地址创建帐户，则会收到一条消息，告诉我该电子邮件地址已被使用，因此正反面都在通信。

这是React的前端，而Back是与Express（v6）一起工作的node.js服务器。

我已经设置了npm CORS软件包，尝试了许多在Internet上找到的设置，但是我从未设法完成帐户创建。任何帮助将不胜感激！

您会在下面找到两个屏幕截图，一个是我登录时的截图，另一个是我尝试注册时的截图。我还将通过几次尝试来放入server.js配置文件。

谢谢！

Server.js 文件-版本1

// ImPORT_BACK
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const cors = require('cors');
const session = require('express-session');
const fileUpload = require('express-fileupload');

const app = express();
const {
  PORT_BACK,PORT_FRONT,HOST,// FRONT_URL,} = process.env;

const Origins = ['http://becomepote.fr','http://becomepote.fr:3000/api/$/','/\.becomepote\.fr$/'];

// CORS
app.use(
  cors({
    origin: Origins,methods: ['GET','POST','HEAD','PUT','PATCH','DELETE','OPTIONS' ],allowedHeaders: ['Origin','Content-Type','Authorization','X-Requested-With','Accept','Access-Control-Request-Method','Access-Control-Request-Headers','X-CSRF-Token','Cache-Control','Pragma'],exposedHeaders: ['Access-Control-Allow-Origin','Access-Control-Allow-Credentials','Content-Range','X-Content-Range'],preflightContinue: true,credentials: true,optionsSuccessStatus: 201,}),);

// BODYPARSER
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false,);

// SESSION
app.use(session({
  secret: process.env.SECRET,name: 'myCookie',resave: false,saveUninitialized: false,cookie: {
    secure: false,httpOnly: true,maxAge: 365 * 24 * 60 * 60 * 1000,},}));

// COOKIE
app.use(cookieParser());

// File Upload
app.use(fileUpload({ useTempFiles: true }));

// Start on assigned port
app.listen(PORT_BACK,() => {
  console.log(`Welcome,this server running at http://${HOST}:${PORT_BACK}`);
});

// Routes
app.use('/api',require('./api/users').router);
app.use('/api',require('./api/question').router);
app.use('/email',require('./email/email.model').router);

Server.js 文件-版本2

// ImPORT_BACK
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const cors = require('cors');
const session = require('express-session');
const fileUpload = require('express-fileupload');

const app = express();
const {
  PORT_BACK,'/\.becomepote\.fr$/'];

const corsOptions = {
  origin: Origins,//maxAge: 240,};

app.use(cors(corsOptions));
app.options('/api/register',cors(corsOptions),(req,res) => {
  res.status(200).send("Preflight request allowed");
});

// BODYPARSER
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false,require('./email/email.model').router);

Users.js

require('dotenv').config();
const express = require('express');
const bcrypt = require('bcrypt');
const router = express.Router();
const cloudinary = require('cloudinary').v2;
const User = require('../Models/Users');
const withAuth = require('../middleware');

/**
   * CREATE - Route for creating a user account,checking if email
   * already exist and using bcyrpt to hash password
   * @param {object} req
   * @param {object} res
   * @returns {object} user object
   */
router.post('/register',res) => {
  const { pseudo,email,password } = req.body;
  User.query()
    .where('email',email)
    .select('email')
    .then((user) => {
      if (user.length > 0) {
        res.status(409).send('Email already exist');
        return;
      }
      if (!email || !password || !pseudo) {
        res.status(400).send({ message: 'One or more values are missing for creating account' });
      }
      else {
        User.query()
          .insert({
            pseudo,password: bcrypt.hashSync(password,10),})
          .then((newUser) => {
            // SESSION
            const userSession = {
              id: newUser.id,email: newUser.email,};
            req.session.user = userSession;
            const { session } = req;
            const response = {
              status: 'Created account',session,};
            res.status(201).send(response);
            res.json(response);
          });
      }
    })
    .catch((err) => res.status(500).send({
      message:
          err.message || 'An error has occurred while creating your account.',}));
});

/**
   * LOGIN - Route to connect a user
   * @param {object} req
   * @param {object} res
   * @returns {[object]} user object
   */
router.post('/connect',res) => {
  const { email,email)
    .select('id','email','password')
    .then((user) => {
      if (!user.length > 0) {
        res.status(401).send('Email is wrong');
        return;
      }
      const passwordIsValid = bcrypt.compareSync(password,user[0].password);
      if (!passwordIsValid) {
        res.status(401).send('Password is wrong');
      }
      else {
        // SESSION
        const userSession = {
          id: user[0].id,email: user[0].email,};
        req.session.user = userSession;
        const { session } = req;
        const response = {
          status: 'Logged in',};
        res.status(200).send(response);
      }
    })
    .catch((err) => res.status(500).send({
      message:
           err.message || 'Login was unsuccessful,please try again',}));
});

解决方法

因此，事实证明，我的问题与CORS错误无关。就像从一开始就说的那样，我的CORS错误问题仅在我尝试在新用户页面上创建帐户时出现（一个选项，然后是一个发布请求）。但是在登录页面上，一切正常（选项然后是发布请求）。

因此，自从我发现奇怪的是，只有我的注册页面会要求app.options('*',cors());才能按照建议的方式工作（并且不起作用），我查看了使用Knex完成的USER模型以检查注册查询。再说一次，我的模型没有任何问题，最后我发现数据库（MySQL）中的一些列需要设置为null（名字，姓氏，年龄，表示形式）。在我创建帐户页面时，稍后在注册过程中需要的信息仅要求提供昵称，电子邮件和密码。

该设置错误会导致我的选项和创建帐户挂起时发出请求，并最终由于同源策略错误（CORS）而崩溃...

最后，这是我用来设置CORS的文件。

Server.js文件

// IMPORT_BACK
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const cors = require('cors');
const session = require('express-session');
const fileUpload = require('express-fileupload');

const app = express();
const {
  PORT_BACK,PORT_FRONT,HOST,// FRONT_URL,} = process.env;

// CORS OPTIONS
const Origins = ['http://becomepote.fr','http://becomepote.fr:3000'];


const corsOptions = {
  origin: Origins,methods: ['GET','POST','HEAD','PUT','PATCH','DELETE'],allowedHeaders: ['Origin','Content-Type','Authorization','X-Requested-With','Accept','Access-Control-Request-Method','Access-Control-Request-Headers'],exposedHeaders: ['Access-Control-Allow-Origin','Access-Control-Allow-Credentials','Content-Range','X-Content-Range'],credentials: true,};

// BODYPARSER
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false,}),);

// SESSION
app.use(session({
  secret: process.env.SECRET,resave: false,saveUninitialized: false,cookie: {
    secure: false,httpOnly: true,maxAge: 365 * 24 * 60 * 60 * 1000,},}));

// COOKIE
app.use(cookieParser());

// FILE UPLOAD
app.use(fileUpload({ useTempFiles: true }));

// Start on assigned port
app.listen(PORT_BACK,() => {
  console.log(`Welcome,this server running at http://${HOST}:${PORT_BACK}`);
});


// CORS OPTIONS APPLIED
app.use(cors(corsOptions));

// Routes
app.use('/api',require('./api/users').router);
app.use('/api',require('./api/question').router);
app.use('/email',require('./email/email.model').router);

与Express进行后期要求时，要与“相同政策”的CORS进行斗争

如何解决与Express进行后期要求时，要与“相同政策”的CORS进行斗争

解决方法

相关推荐