[英]Open URL in React application via node and express
我试图通过node.js
和express
在reactjs
应用程序中打开用户提供的URL。
我正在使用material-ui
和axios
。 请在下面找到UI代码。
实际上,这是一个用于UX测试项目的POC,其中给出了要测试的应用程序的URL,并且该应用程序将在父(主)应用程序中打开以进行测试。
UrlForm.js
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import axios from 'axios';
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
},
dense: {
marginTop: 16,
},
menu: {
width: 200,
},
root: {
...theme.mixins.gutters(),
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
},
button: {
margin: theme.spacing.unit,
},
});
class UrlForm extends React.Component {
state = {
url: ''
};
handleChange = name => event => {
this.setState({
[name]: event.target.value,
});
};
sendData = () => {
console.log(this.state.url);
axios.post("http://localhost:3001/openurl", { url: this.state.url })
.then(res => console.log('Data send'))
.catch(err => console.log(err.data))
}
render() {
const { classes } = this.props;
return (
<Paper className={classes.root} elevation={1}>
<form className={classes.container} noValidate autoComplete="off">
<TextField
id="outlined-name"
label="URL"
className={classes.textField}
value={this.state.url}
onChange={this.handleChange('url')}
margin="normal"
variant="outlined"
/>
<Button variant="outlined" color="primary" onClick={() => { this.sendData(); }} size="small" className={classes.button}>
Open
</Button>
</form>
</Paper>
);
}
}
UrlForm.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(UrlForm);
在这里,我发送url在UI上打开。
对于服务器我使用express-generator
,下面是路由器的代码。 还设置了使用cors
和header。
app.js
app.use((req, res, next) => {
// Check if the origin is whitelisted in the env vars
res.set({
// standard CORS headers
'Access-Control-Allow-Origin': 'http://localhost:3000',
'Access-Control-Allow-Headers': 'Content-Type, Authorization, Accept, Accept-Language',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
// addresses security issues identified by automated pen testing
'X-Frame-Options': 'DENY',
'X-Content-Type-Options': 'nosniff',
'X-XSS-Protection': 1,
});
next();
});
路线/ index.js
// routes/index.js
import express from 'express';
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.post('/openurl', function(req, res, next) {
console.log(req);
console.log(res);
})
export default router;
在route / openurl中,我在req.body中获取了URL。 如何获取给定的url响应并将其发送到客户端以在UI上打开它?
这是正确的方法吗? 因为我正在寻找可能的选择。
您需要对用户URL进行get调用才能获得响应:
首先,安装axiosn
npm install axios
然后在你的节点应用程序:
const axios = require('axios');
router.post('/openurl', function(req, res, next) {
let url = req.body.url ;
axios.get(url)
.then(function (response) {
//do what's you want with response
console.log(response.data);
res.json({ content : response.data});
})
.catch(function (error) {
console.log(error);
})
})
或者只是一种简单的方法,您可以在您的反应应用程序中创建一个Iframe并显示使用提供的URL
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.