前端路线--Vue(day16)

axios和vue跨域的笔记

axios代码

utils-request.js

import axios from "axios"
let ajax = axios.create({
    baseURL: "/api",
    timeout: 5000
})

export default ajax

src----api------users.js

// 暴露请求数据的方法
import ajax from "@/utils/request.js"

export let getUserListApi = (params) => {
    // http://localhost:3000/api/userlist?page=1&size=2
    return ajax({
        url: "/userlist",
        method: "get",
        params
    })
}

跨域代码

vue.config中

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true,
    host: "0.0.0.0",
    port: 9527,
    proxy: { //修改vue.config.js之后，一定要重写启动项目才能生效
      "/api": { //用  /api 代替 http://localhost:3000/api
        target: "http://localhost:3000/api",
        changOrigin: true,  //允许跨域
        pathRewrite: { //重写路径
          "^/api": ""
        }
      }
    }
  }
})

详细笔记文档连接

笔记在这里