Vue配置代理

跨域：

同源策略

：浏览器的一种安全协议，只要协议，主机，端口号，有一个不一致，就会产生同源策略。

解决跨域：

1、后台直接放开，优点：方便，缺点：不安全
2、JSONP ：利用script标签不受同源策略的影响，需要后端配合（）
3、配置代理

解决跨域：

1、后台直接放开，优点：方便，缺点：不安全
2、JSONP ：利用script标签不受同源策略的影响，需要后端配合（）
3、配置代理

为什么需要配置代理？

原因就是因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据

-D 等价于 --save-dev
-S 等价于 --save

在vue.config.js中设置配置

//  配置代理
  devServer:{
    //不设置  重写  http://wkt.myhope365.com/weChat
    //设置重写    http://wkt.myhope365.com
    proxy:{
      '/api':{  //代理名称
      target:'https://course.myhope365.com/',
        changeOrigin:true,  //是否跨域
        // pathRewrite:{
        // '^/course-api':''  //路径重写
        // },
      }
    }
  }

路径重写：（正则）匹配以api开头的路径为空（将请求前缀删除）

对http进行封装：

// 对http请求进行封装
import axios from 'axios'
// 使用自定义的配置文件发送请求
const instance = axios.create({
    baseURL: '',
    timeout: 5000,
    headers: {}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    instance// 对响应数据做点什么
    if (response.status === 200) {
        return response.data;
    } else {
        console.error("请求错误")
        console.error(response)
    }
    return response;
}, function (error) {
// 对响应错误做点什么
    return Promise.reject(error);
});
export default instance

再建立一个js文件进行封装调用
例如：

导入
import http from "./axios"
//首页课程列表
export function getIndexCoueseList(){
    return http.post('/api/weChat/applet/subject/list', {enable: 1,})
}
//轮播图
export function getIndexCarousel(){
    return http.get('/api/weChat/applet/course/banner/list?number=5',)
}
//三个课程
export function  getCourse(type, pageNum, pageSize) {
    let url = new URLSearchParams()
    url.append('type', type)
    url.append('pageSize', pageSize)
    url.append('pageNum', pageNum)
    return http.post('/api/weChat/applet/course/list/type', url)
}

登录鉴权

什么是登录鉴权？
登录鉴权即验证用户是否拥有访问系统的权利。
实现授权的方式

• cookie
• session
• token
• OAuth
  凭证
  实现认证和授权的前提是需要一种媒介标记访问者的身份
  token令牌可以表明身份
  Cookie
  如何工作
  网页发HTTP请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。
  作用
  HTTP是无状态的协议，需要cookie或session保存状态，告知服务器前后两个请求是否来自同一浏览器