vue2 axios二次封装 axios跨域 proxy实现跨域 （开发阶段）

# 为什么会出现跨域问题?

出于浏览器的同源策略限制.同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常的功能可能会受到影响,跨域收是Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现,同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互,

跨域:如果多次请求协议、域名、端口号有不同的地方，称之为跨域

 

跨域的三种方式

1.  jsonp

以前的技术，通过<script>标签跨域请求，服务器端返回的是符合js语法的函数调用，函数的形参即数据

2.  CORS

跨域资源共享，需要服务器端进行配置

//express中配置cors
const cors = require("cors")
app.use(cors())

 

3.  服务器代理

（1） 通过在vue.config.js中配置proxy实现跨域 （开发阶段）

（2） 通过Nginx服务器代理实现跨域 (生产阶段)

 

在vue.config.js中配置proxy实现跨域 （开发阶段）

#  在vue项目中的根目录下创建一个 vue.config.js 

!!! 本地地址: 默认 http://localhost:8080/ 

!!! 测试接口:  http://xx.xx.xx.xx/api/product/getList

通过跨域实现 http://localhost:8080/api/product/getList 获取数据 

欺骗web是向本地发起的请求 实现跨域 =>  配置 target 

 接口拼接                      target + baseURL+ url

                  'http://xx.xx.xx.xx' + '/api' + '/product/getLis'

以后改url 就能获取数据 (后台接口有配置的话)

 http://xx.xx.xx.xx/api/getuer

 http://xx.xx.xx.xx/api/getrole

#vue.config.js 

module.exports = {
    productionSourceMap:false,
    // 关闭ESLINT校验工具
    lintOnSave: false,

      //本地配置

　　　 host:'0.0.0.0', //可以忽略不写

　　　 port: 8080,//它是用来修改你打开后的端口号的

　　　 open: true,//值为 true的话，项目启动时自动打开到浏览器里边， false不会打开

    //配置代理跨域
    devServer: {
      proxy: {
        "/api": {

　　　　　　　　target: "http://xx.xx.xx.xx", //后台接口

        },
      },
    },
  };

request.js 放src/util 或者在 src/api (我放这里)

src/api/request.js

//对于axios进行二次封装
import axios from "axios";
import nprogress from "nprogress";
//如果出现进度条没有显示：一定是你忘记了引入样式了
import "nprogress/nprogress.css";
import store from "../store";

//底下的代码也是创建axios实例
let requests = axios.create({
    //基础路径
    baseURL:"/api",
    timeout:5000,
});

requests.interceptors.request.use((config)=>{
    //现在的问题是config是什么?配置对象
  //需要携带token带给服务器
    // if(store.state.user.token){
    //     config.headers.token = store.state.user.token;
    // }
    return config;
});

requests.interceptors.response.use((res)=>{
        //相应成功做的事情
        return res.data;
    },(error) => {
       return Promise.reject(new Error('false'));
    }
);

export default requests;

src/api/index.js 也可以按 角色 | 权限 分文件夹等等 不用全接口放一起

//统一管理项目接口的模块
//引入二次封装的axios（带有请求、响应的拦截器）
import requests from "./request";

//三级菜单的请求地址  /api/product/getList   GET    没有任何参数
//对外暴露一个函数，只要外部调用这个函数，就想服务器发起ajax请求、获取咱们的三级菜单数据。当前咱们这个函数只需要把服务器返回结果返回即可。

export const reqgetCategoryList = () =>{
    return requests({url:'/product/getList',method:'get'});
}

//切记:当前函数执行需要把服务器返回结果返回