CORS策略:在请求的资源上不存在“访问-控制-允许-原产地”标题。同时在reactjs中使用iframe

Question

我希望使用站点从一个按钮访问iframe。本网站授权访问所有域名。这是我的按钮的代码：

<Button
        component={NavLink}
        activeClassName={classes.activeBtn}
        to="/searchEngine"
        className={classes.buttonItemMiddle}
      >
        {location.pathname == '/searchEngine' ? (
          <Home fontSize="large" style={{ color: 'rgb(0,133,243)' }} />
        ) : (
          <HomeOutlined fontSize="large" />
        )}
      </Button> 

这是我在App.js中的代码

<Route path='/searchEngine' component={() => { 
                          <iframe src="https://gkwhelps.herokuapp.com" title="Search engine"></iframe>
                          return null;
                          }}/>

但是，当我运行我的应用程序并单击按钮时，它不会返回任何内容，当我在浏览器上检查我的代码时，会得到以下错误：

Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=4&transport=polling&t=O7fVlw-' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我从因特网重新加载了解决方案，特别是从堆栈溢出上的这个问题和这个博客中重新加载了解决方案，并在我的App.js文件中添加了以下代码：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "https://gkwhelps.herokuapp.com"),
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"),
  next(),
})

但这并没有解决问题。下面是我的后端index.js文件的内容：

const express = require('express')
const cors = require('cors')
const mongoose = require('mongoose')
require("dotenv").config()
const app = express()
const http = require('http')
const server = http.createServer(app)
const io = require('socket.io')(server)

const UserRoutes = require('./routes/User')
const AuthRoutes = require('./routes/Auth')
const PostRoutes = require('./routes/Post')

const PORT = process.env.PORT || 5000
const {MONGODB_URI} = require("./config")

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

app.use((req, res, next) => {
  
  io.req = req
  req.io = io
  next()
})

app.use('/api/auth', AuthRoutes)
app.use('/api/user', UserRoutes)
app.use('/api/post', PostRoutes)

require('./socket')(io)

mongoose
  .connect(MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true,
  })
  .then(() => {
    console.log('database connected')
    server.listen(PORT, () => console.log(`server started on port ${PORT}`))
  })
  .catch((err) => console.log(err))

为了解决这个问题，我还在文档中搜索解决方案，在这个博客中，我修改了我的index.js文件如下：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'localhost:3000')
  io.req = req
  req.io = io
  next()
})

但没有成功。我的前端package.json文件在这里：

{
  "name": "firebase",
  "version": "0.1.0",
  "private": true,
  
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@mui/material": "^5.8.1",
    "@react-google-maps/api": "^2.11.8",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "0.27.2",
    "classnames": "2.2.6",
    "dotenv": "8.2.0",
    "emoji-picker-react": "^3.5.1",
    
    "install": "^0.13.0",
    "jwt-decode": "3.1.2",
    "moment": "^2.29.3",
    "node-fetch": "^3.2.4",
    "npm": "^8.11.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-eva-icons": "0.0.8",
    "react-hook-google-maps": "^0.0.3",
    "react-moment": "^1.1.2",
    "react-router-dom": "5.3.3",
    "react-scripts": "5.0.1",
    "socket.io-client": "4.5.1",
    "words-to-numbers": "1.5.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "web-vitals": "^2.1.4"
  }
}

我的后端package.json文件：

{
  "name": "backend",
  "version": "1.0.0",
  "license": "MIT",
  "main": "index.js",
  "type": "commonjs",
  "scripts": {
    "dev": "concurrently \"npm start\" \"npm run client\"",
    "start": "node backend/index.js",
    "server": "nodemon backend/index.js",
    "client": "npm start --prefix frontend"
  },
  "dependencies": {
    "bcrypt": "^5.0.0",
    
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongodb": "^3.7.3",
    "mongoose": "^5.10.7",
    "multer": "^1.4.2",
    "socket.io": "^4.4.1"
  },
  "devDependencies": {
    "concurrently": "^7.2.2",
    "nodemon": "^2.0.4"
  }
}

Answer 1

我认为这是因为您的前端试图向运行在同一个域(Localhost)上的端点发送请求。但您的错误不是由express抛出的。这就是为什么你试图应用的解决方案无效的原因。

自以来，在使用localhost.时，需要显式地启用跨源资源共享(CORS)事件。

在代码中插入const io = require('socket.io')(server)，您可以这样做：

const { Server }= require('socket.io');
const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:3000"
  }
});

您可以阅读官方的装卸cors博士