vue配置跨域

1,引入 axious,cd 到你的工程

npm install --save axios vue-axios

在 main.js 中加入

import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios

注意 Vue.prototype.$axios = axios这句话就决定了你以后使用axious的时候就必须以$ axious 这种方式进行
axious 引入结束之后在 config/index.js 文件中加入:

 proxyTable: {
            '/api': {
                target: 'http://localhost:8080', //你要跨域的网址  比如  'http://news.baidu.com',
                // secure: true, // 如果是https接口,需要配置这个参数
                changeOrigin: true, //这个参数是用来回避跨站问题的,配置完之后发请求时会自动修改http header里面的host,但是不会修改别的
                pathRewrite: {
                    '^/api': '/api' //路径的替换规则
                        //这里的配置是正则表达式,以/api开头的将会被用用‘/api’替换掉,假如后台文档的接口是 /api/list/xxx
                        //前端api接口写:axios.get('/api/list/xxx') , 被处理之后实际访问的是:http://news.baidu.com/api/list/xxx
                }
            }
        },

至此跨域的配置就结束了,然后 axious 发请求即可;

 sub:function(){
        var _this=this;

    this.$axios({
    method: 'get',
    url:host+'shiro/login',
    params: {
           userName:_this.userName,
           passWord:_this.passWord
    },
     headers:{
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
    }).then((res)=>{
      var st=res.data;
      }else{
        _this.showAlert()
      }
    })
      }

至于后端的怎么设置请求头请参考我的另一篇博客,点击此处

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZNineSun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值