我希望从使用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"
}
}
my backendpackage.jsonfile:
{
"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"
}
}
我认为这是发生的，因为你的前端正试图发送请求到同一域(localhost)上运行的端点。但是这个错误不是由express抛出的。这就是为什么你尝试应用的解决方案不起作用。
因为插座。IO v3，当你在本地主机上工作时，你需要显式地启用跨域资源共享(CORS)事件。
代替const io = require('socket.io')(server)在你的代码中，你可以这样做:
const { Server }= require('socket.io');
const io = new Server(httpServer, {
cors: {
origin: "http://localhost:3000"
}
});
你可以阅读官方文档处理cors '