【常见】Vue内解决跨域问题基于proxy、Vue内存储cookie方法

春暖花开.,

已于 2023-05-17 15:31:54 修改

阅读量999

点赞数

文章标签： vue.js javascript 前端

于 2023-05-09 02:23:11 首次发布

本文链接：https://blog.csdn.net/m0_64494670/article/details/130570809

版权

一. Vue内解决跨域问题

描述: /api_proxy 要于 api接口开头一致

Vue.config.js内

module.exports = {
  lintOnSave: false,
  devServer: {
    proxy: {
      //配置跨域
      '/api_proxy': {
        target: 'https://xxx.123n.vip/', //这里填写项目真实的后台接口地址
        changOrigin: true //设置允许跨域
        // pathRewrite: {
        //   //这个重写不可省略！因为我们真正请求的地址并不含 /api
        //   '^/api': ''
        //   /* 当我们在浏览器中看到请求的地址为：http://localhost:8080/api/data/getdata 时
        //     因为重写了 /api ，所以实际上访问的地址是：http://x.x.x.x:x/data/getdata，
        //     */
        // }
      }
    }
  }
}

App.Vue内

   axios({
        url: '/api_proxy/recycle/NewUser/pay_info' ,
        method: 'GET',
        params: {
          pay_id:1000
        } //get请求
        // data: {
        //      userName:521521,
        //      password:521521,
        //      Acode:'',
        //      code:1231,
        //      is:0
        // }, //post请求
   
      }).then(({ data: res }) => {
        // 成功返回数据
        console.log(res);
      }).catch((err) => {
        // 失败返回数据
        console.log(err);
      });

二.Vue内存储cookie方法

1. npm install js-cookie
2.import Cookies from 'js-cookie'
3.存储cookies
Cookies.set('cookieName', 'cookieValue')
4.传递信息
Cookies.set('cookieName', 'cookieValue', { expires: 7, path: '/' })
5.获取cookie值
const value = Cookies.get('cookieName')
6.删除cookie
Cookies.remove('cookieName')