Axios封装和跨域问题-02

在项目目录中 安装命令 npm i -S axios

在src目录下创建utils/request.js文件，这里对axios进行封装的文件

　import axios from "axios"

　　const request = axios.create({
　　　　baseURL:"/",
　　　　timeout:5000
　　})


　　export default request






　　

在src目录下创建api文件夹，下存放api请求接口

import request from "@/utils/request";

export function Login(username, pwd){
    return request({
        url: '/login',
        method: "POST",
        data: {
            username,
            pwd
        }
    })
}

//get请求传递参数方式 dev定义参数名称，res传递参数

　　export function getDevData(res){

　　　　return request({

　　　　url:"dev",

　　　　method:"GET",

　　　　　　params:{"dev":res}

　　　　})

　　}

# 书写方式1
如果一个js文件中，只有一个接口的话可以用 export default login(){}  在引用的时候，直接import login from "@/view/login.js"

# 书写方式2
如果一个js文件中，存在多个接口的话， export function login(){}在引用的使用，必须与接口名称一直 import {login} form "@/view/login.js"

在vue中，请求链接使用了同源策略。

什么是同源策略：同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源是指：协议、IP、端口一致。有一项不符都不合格。

在测试调试需要使用代理的方式，进行前后端调用。

在Vue项目中 vue.config.js中进行配置。

module.exports = {
    devServer:{
        port:8899, 
        host:"0.0.0.0",
        https:false,
        open:true,
        proxy:{  # 这里对请求进行代理 
            '/':{
                target:'http://127.0.0.1:8000/', #目标请求地址
                changeOrigin:true, 
                pathRewrite:{
                    "^/":"" 
                }
            }
        },
    },

    lintOnSave:false,
    productionSourceMap:false,
}