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


Logo

前往低代码交流专区

更多推荐