VUE前端请求跨域问题解决

解决方法:

  1. vue.config.js文件配置:
    module.exports = {
        devServer: {
            open: true,
            host: '192.168.1.193',
            port: 8080,
            https: false,
            //以上的ip和端口是我们本机的;下面为需要跨域的
            proxy: { //配置跨域
                '/api': {
                    target: 'http://api.tp6.com:6110',
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: {'^/api': '/api'}
                }
            }
        },
    
        runtimeCompiler: true
    }
  2. axios配置:
        //2.1 请求拦截的作用
        instance.interceptors.request.use(config => {
                config.headers['Content-Type'] = 'application/json;charset=utf-8';
                let user = localStorage.getItem("uId")?JSON.parse(localStorage.getItem("uId")):null
                if (user) {
                    config.headers['token'] = localStorage.getItem("token") // 让每个请求携带自定义token 请根据实际情况自行修改
                }
                return config;
        }, err => { })
  3. axios具体的请求
    import { request } from "./request"
    
    export function getUserData() {
        return request({
            url: 'user/index'
        })
    }

     

posted on 2023-03-01 23:44  醉舟903  阅读(285)  评论(0)    收藏  举报

导航