vue+node.js跨域问题的解决

2 篇文章 0 订阅
2 篇文章 0 订阅

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);
})


  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值