vue+node.js跨域问题的解决
vue默认是运行在localhost:8080上,而node.js可能运行在其他端口,而前台去请求后台的api时就存在跨域问题。另外,我们经常会去访问其他网站的数据,比如http://google.com/...,此时也存在跨域问题。解决跨域问题的方法:利用vue-cli自带的解决跨域的问题1.在config/index.js中利用proxy代理的方法dev: {// Paths...
·
vue默认是运行在localhost:8080上,而node.js可能运行在其他端口,而前台去请求后台的api时就存在跨域问题。
另外,我们经常会去访问其他网站的数据,比如http://google.com/...,此时也存在跨域问题。
解决跨域问题的方法:
利用vue-cli自带的解决跨域的问题
1.在config/index.js中利用proxy代理的方法
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
//开启代理服务器,解决跨域问题
proxyTable: {
'/api': {
target: 'http://localhost:8088',//要访问的后端接口
changeOrigin: true,
pathRewrite: {
'^/api': '/'
//这里的配置是正则表达式,以/api开头的将会被用用‘/api'替换掉,假如后台文档的接口是 /api/list/xxx
//前端api接口写:axios.get('/api/list/xxx') , 被处理之后实际访问的是:http://news.baidu.com/api/list/xxx
}
}
},
后台的接口数据:
// 注册
router.post('/api/user/register',(req,res) => {
const _user = req.body;
const userName = _user.userName;
User.findOne({userName:userName},(err,user) =>{
if(err){
global.logger.error(err)
}
if(user){
res.json({
errno:1,
data:'用户名已经存在'
})
}else{
//不存在用户则创建新用户并保存到数据库中
user = new User(_user);
user.save((err,user) =>{
if(err){
global.logger.error(err);
}
res.json({
errno:0,
data:'注册成功'
})
})
}
})
});
前台调用后台接口数据:
import axios from 'axios'
axios.get('/api/user/register',data).then(res=>{
console.log(res);
}).catch(reject=>{
console.log(reject);
})
更多推荐
已为社区贡献1条内容
所有评论(0)