雖然 CORS 設置正確，但仍然發生 CORS 錯誤 - NODE 和 JAVASCRIPT

Question

下面的代碼只是將圖像上傳到節點服務器文件夾。 當我在本地主機上構建時，一切正常，我理解，因為它在同一台機器上。 但是，一旦我將它推送到 heroku 服務器，我就會繼續Access to XMLHttpRequest at 'https://mydomainname.herokuapp.com/api/cars/images' from origin 'https://mydomainname.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 其次是Failed to load resource: net::ERR_CONNECTION_RESET或有時Failed to load resource: net::ERR_FAILED我已經嘗試了stackoverflow上的所有內容，我什至卸載了cors包並在服務器端手動輸入了cors代碼app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,image"); next(); }); 但這也沒有用。 我們有 20 條不同的 api 路由，它們都運行良好。 只是這個 api 路線不斷出現 cors 問題。 我不明白我哪里出錯了，因為我已盡一切努力確保 cors 流程正常工作。 任何幫助將不勝感激。

[BACKEND SERVER NODEJS]

const express = require('express');
const router = require("express").Router();
const bodyParser =  require('body-parser')
require('dotenv').config();
const https = require('https');
const port = process.env.PORT || 8000;
const app = express();
const cors = require('cors');

//Cors Configuration
app.use(cors())

//BodyParser middleware
app.use(express.json());

const postCarImages = (req,res)=>{
  try{
    let imageData = JSON.parse(req.headers["image"]).imageData

    if(!imageData){
      return res.status(404).json({
        status:404,
        message: "Error in Uploading Images"
      })
    }else{
      let projectFolderID = imageData[0].folderID
      let projectFolderName = imageData[0].image.folderName
      let number = imageData[0].image.number

      if(projectFolderID && projectFolderName && number){
        req.on('data',(chunk)=>{
          fs.appendFileSync(`./store_pictures_cars/${projectFolderID}/${projectFolderName}/Car ${number}.jpeg`,chunk,'base64')
        })

        return res.status(200).json({
          status: 200,
          message:'I am done with this one',
          folderName:projectFolderName
        })

      }else{
        return res.status(404).json({
          status:404,
          message: "Error in Uploading Images"
        })
      }

    }

  }catch(error){
    res.status(500).json({
      message:'Something went wrong. Please refresh page.'
    })
  }
}

router.post('/api/cars/images',postCarImages)

//Prevent application from crashing if incorrect route
app.all('*', (req, res, next) =>{
  const err = new Error(`Requested URL ${req.path} not found!`);
  err.statusCode = 404;
  next(err);
})

app.use((err, req, res, next) =>{
  const statusCode = err.statusCode || 500;
  res.status(statusCode).json({
    success: 0,
    message: err.message,
    stack: err.stack
  })
})


//Serve static files if in production
if(process.env.NODE_ENV === 'production'){

  //Set static folder
  app.use(express.static('client/build'));

  app.get('*', (req, res) =>{
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
  });
}



app.listen(port, () => console.log(`Server started on port ${port}`));

[FRONTEND HTML]

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@0;1&family=Heebo:wght@400;500&family=Lato:wght@400;700;900&family=Nunito+Sans:wght@300;400&family=Open+Sans&family=PT+Sans:wght@700&family=Roboto+Mono:wght@500&family=Roboto+Slab:wght@600&family=Roboto:wght@700;900&family=Rubik:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"/>
    <link rel="stylesheet" href='style.css'>

    <title>Testing</title>
  </head>
  <body>
    <main id="main-container">
      <input id="images-folder" type="file" style="display: none;" accept="image/*" webkitdirectory directory multiple>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
    <script type="module" src="app.js"></script>
  </body>
</html>

[FRONTEND JAVASCRIPT]

function after_render(){
  const uploadImagesBtn = document.getElementById('images-folder')
  const folderID = "ID-1234Testing-Testing_Folder"

  uploadImagesBtn.addEventListener('change',(event)=>{

    uploadImages(event.target.files,folderID)
        event.target.value = ""
  })

}

async function renameFieldImages(images,id){
  const api = 'https://mydomainname.herokuapp.com/api/cars/images'
  let totalChunksCompleted = 0;
  let folderID = id;
  let projectFolderName = ''

let totalImagesUploadedProgress = []//Keep pushing total image size of an image once the 
image has been uploaded successfully

let totalImages = images.length//Get total number of images uploaded by the user

let percentCompleted = 0

  for(let i = 0; i < images.length; i++){
      const fileReader = new FileReader()

      //Send data to server
      let data = {
            imageData:[
             {
              folderID:folderID,
               image:{
                 folderName:'Testing_Image_Folder_1',
                 number: '1'
               }
             }
           ],
      }


      fileReader.readAsArrayBuffer(images[i])

      let request = new XMLHttpRequest()
      request.open('POST',api,true)
      request.setRequestHeader("Content-Type", "application/octet-stream");
      request.setRequestHeader("image", JSON.stringify(data));

      fileReader.addEventListener('load',(event)=>{


      request.send(event.target.result)
      })


      request.upload.onprogress = function({loaded, total}){

            let completedImage = Math.floor(loaded/total) * 100

            if(completedImage === 100){

              totalImagesUploadedProgress.push(total)

              percentCompleted = Math.floor((totalImagesUploadedProgress.length/totalImages)*100)//Get percent completed

            }
      }
  }
}

Answer 1

以下是您可以檢查的一些事項：

檢查您是否正在從 HTTP 調用 HTTPS。 那是您遇到CORS問題的時候。

檢查您是否已正確安裝 SSL 證書。

TCP/IP 配置不正確或損壞。 在你的服務器上檢查這個。 檢查入站和出站安全規則。

從 Postman 測試您的后端。

雖然 CORS 設置正確，但仍然發生 CORS 錯誤 - NODE 和 JAVASCRIPT

問題描述

1 個解決方案

解決方案1
0 2022-07-11 16:06:41

雖然 CORS 設置正確，但仍然發生 CORS 錯誤 - NODE 和 JAVASCRIPT

問題描述

1 個解決方案

解決方案1 0 2022-07-11 16:06:41

解決方案1
0 2022-07-11 16:06:41