vue登录请求跨域代理问题

登录

点击登录按钮

通过axios发请求

 handleLogin() {
      this.$refs.loginForm.validate(async (flag) => {
        if (flag) {
          this.$axios.post('/prod-api/sys/login',this.loginForm)
            .then((res) => {
              console.log(res.data.data, '登录');
              let token = res.data.data
                window.localStorage.setItem("token",token)
                // this.$router.push('/')
              })
            .catch((error) => {
              console.log(error,'登录失败');
            })
        }
      })

    }

在mian.js里面配置请求的根路径

import axios from 'axios'
const service = axios.create({
        baseURL: "/api", // url = base url + request url
        timeout: 110000 // 请求超时时间
    })
    // 请求拦截器
service.interceptors.request.use(config => {
    // 在这个位置需要统一的去注入token,把token存到贝蒂存储里面
//如果第一次登录的话是获取不到token的,登录成功之后请求头才会携带token
    let token = window.localStorage.getItem("token")
    if (token) { //必须携带一个请求头
        config['headers']['Authorization'] = token
    }
    return config // 必须返回配置!!!!!!!!!!!!!不然会卡在拦截器
}, error => {})

Vue.prototype.$axios = service //使用这个service

或者

import axios from 'axios'
const service = axios.create({
        baseURL: "https://3yya.com/u/d762110a36e3a4f8/bbs/app/", // url = base url + request url
        timeout: 110000 // 请求超时时间
    })
    // 请求拦截器
service.interceptors.request.use(config => {
    // 在这个位置需要统一的去注入token,把token存到贝蒂存储里面
    //如果第一次登录的话是获取不到token的,登录成功之后请求头才会携带token
    let token = window.localStorage.getItem("token")
        // console.log(config);
    if (token && config.url.indexOf("restapi.amap.com") < 0 && config.url.indexOf("www.mxnzp.com") < 0) { //必须携带一个请求头
        config['headers']['Authorization'] = "Bearer " + token
    }
    return config // 必须返回配置!!!!!!!!!!!!!不然会卡在拦截器
}, error => {
    console.log(error);
})

Vue.prototype.$axios = service //使用这个service

在vue.config.js里面配置跨域

/*
 * @Author: your name
 * @Date: 2021-07-13 17:13:43
 * @LastEditTime: 2021-07-13 17:44:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \lishui_web3d\src\vue.config.js
 */
const merge = require('webpack-merge')


module.exports = {
    // 配置静态资源路径  只需要配置一下/xxx即可，其实就是在路径前面加一个/xxx告诉vue让他去这个域名下这个publicPath下去找文件
    chainWebpack: (config) => {
        config.module
            .rule('zhoux').test(/\.(glb)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                limit: 10000
            })
            .end();
    },
    devServer: {
        proxy: {
            '/api': {//就是放置在根路径那里
                target: 'http://ihrm.itheima.net/', //设置你调用的接口域名和端口号 别忘了加http
                changeOrigin: true, //允许跨域
                pathRewrite: {
                    '^/api': '' //这个是定义要访问的路径，名字随便写 
                }
            }
        }
    },
    publicPath: "./",
    assetsDir: './',
    outputDir: 'dist',
}