解决跨域问题

一、跨域：

要了解什么是跨域，首先要了解什么是同源策略

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

二、如何解决跨域

解决跨域共有三种方式，但前两种目前很少用到，主要应用第三种方式

1、后台直接放开

顾名思义：后台放开，其带来的优点就是使用很便捷，但是弊端也很明显，那就是数据容易泄露，不安全

2、JSONP

利用script标签，不受同源策略的影响。此方法需要与后端配合

3、配置代理

原理：前端与后端之前添加代理当做桥梁

第一步：在vue.config.js中配置代理

//配置代理
    devServer: {
        //不设置 重写  http://wkt.myhope365.com/weChat
        //设置重写   http://wkt.myhope365.com
        proxy: {
            '/course-api': {         //代理名称,这里最好有一个
                target: 'https://course.myhope365.com/api/',  // 后台接口域名
                changeOrigin: true,  //是否跨域
                pathRewrite:{
                    '^/course-api':''//路径重写
                }
            }
        }
    }

第二步：应用
用/course-api代替后台接口域名在url中使用

封装axios代码：

// 对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;
        return response;
    } else {
        console.error("请求错误")
        console.error(response)
    }
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
export default instance