vue 跨域的解决办法

时间：2025-03-28 11:18:22

第一种  数据代理方式的方式

     创建一个文件夹 文件   在里边定义跨域数据  

 = {
    devServer: {
      open: true, //是否自动弹出浏览器页面
      host: "0.0.0.0",  //也可以换成localhost      host: "localhost", 
    //   port: 8080,
      // https: true,
      hotOnly: false, 
       //以上的ip和端口是我们本机的;下面为需要跨域的
       proxy:{ //配置跨域
          '/api': {
              target: '/post',   //你的后端端口前部分 ？之前的部分
              changeOrigin: true, // 虚拟的站点需要更管origin     //允许跨域
              pathRewrite: {  
                  '^/api': ''  //请求的时候使用这个api就可以
              }
          }
      },
  },
}

页面调用


<template>
  <div class="img">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <div class="nav">
        <el-form-item label="账号" prop="namea">
          <el-input v-model=""></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model=""></el-input>
        </el-form-item>
        <el-form-item class="jizhu">记住密码
          <el-switch v-model=""></el-switch>
        </el-form-item>
        <button @click="denglu" class="but"> 登录</button>
      </div>
    </el-form>
  </div>
</template>
<script>
// 引入axios


import http from '../../'
export default {
  data() {
    return {
      ruleForm: {
        namea: '',  //账号
        pass: '',   //密码
        delivery: false  //记住密码
      },
      rules: {
        namea: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    denglu() {
      // axios数据请求
         ("/api?name=zhou&pass=zhou123&delivery=true")
      
        .then(response => {    //监听返回
          (, 'get 正常接口数据请求');
          // 存储token
           = "token=your_token";  // 存储在cookie
          ("token", "your_token");  // 存储在sessionStorage
          ("token", "your_token");  // 存储在localStorage

          // 我也不知道这个位置生效了没有
          let token = ("x-auth-token")
          if (token) {
            ["x-auth-token"] = token
          }
          // 判断输入的数据 和后台数据有没有对上
          if ( ===  &&  ===  &&  === true) {
            ('登录成功 ')
            // alert('成功')
            this.$({ path: "/Demo" });  //判断成功  跳转到新的页面
          } else {
            // alert('登录失败')
            ('登录失败')
          }
        })
        .catch(error => {
          (error, '失败');
        });
    }
  }
}
</script>
<style lang="less">
.img {
  height: 45rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../assets/')center center no-repeat;
  background-size: 100% 100%
}

.nav {
  border-radius: 10px;
  padding: 52px 54px 52px 0;
  width: 100%;
  background: linear-gradient(rgb(158, 116, 116), rgb(138, 138, 205));

}

.but {
  margin-left: 44px;
  margin-top: -22px;
  width: 83px;
  height: 40px;
  background-color: cornflowerblue;
}

.jizhu {
  margin-top: -17px;
  margin-left: 116px;
}</style>

  按需引入

import Vue from 'vue'
import App from './'
import router from './router'
import store from './store'


import echarts from 'echarts'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/'

 = false

(ElementUI)

import dataV from '@jiaminghi/data-view'

(dataV)
var axios = require('axios')
 = '/api'
 
.$http = axios //正确的使用 


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

---------------------------------------------------------------------------------------------------------------------------------

二  axios封装

   创建一个文件夹 文件   在里边定义 axios数据封装请求   跨域数据  

import axios from "axios";
//1.允许创建axios实例
const instance = ({
    proxy: { //配置跨域
        '/api': {
            target: '/post',   //你的后端端口前部分 ？之前的部分
            changeOrigin: true, // 虚拟的站点需要更管origin     //允许跨域
            pathRewrite: {
                '^/api': ''  //请求的时候使用这个api就可以
            }
        },
    },
    //   baseURL: "",    //不跨域可以省略上边的proxy 使用这个
    // 表示超时事件 如果超过这个时间 就不再请求 进行报错
    // Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')
    timeout: 5000000,
    //请求头
    headers: { "Content-Type": "application/json " },
    //   //会在原先传的参数的情况下 前面添加一项 可以用于传token
    // get请求使用
    params: {
        token: ("token"),
    },
    // post请求使用
    data: {
        token: ("token"),
    },
});

// 2.拦截器
// 请求拦截器
// 在发送请求之前执行这个函数
(
    function (config) {
        // 参数config是要发送给后端的所有内容
        // 在发送请求之前统一做一些事情 比如发送token 更换请求头
        // (config);

        // 如果是上传文件的请求 更改请求头
        // if ( === "/file/upload") {
        //    = ...
        // }
        return config;
    },
    (error) => {
        // 对请求错误做些什么
        return (error);
    }
);

// 响应拦截器
// 在刚好接收数据的时候执行
(
    function (response) {
        (response); //数据对象
        // 对响应数据做点什么
        //?  可以在这里过滤数据 要哪个数据返回哪个数据
        //?  可以在这处理状态码
        if ( === 200) {
            return response; //这里return出去的东西是return导get或者post方法的.then方法里
        } else if ( === 500) {
            // 抛错导catch
            // 这里404错误无法处理
            throw new Error("505 服务器端错误...");
        }
    },
    function (error) {
        // 对响应错误做点什么
        return (error);
    }
);
const http = {
    // 参数可以直接传递 params直接是对象
    get(url, params) {
        //使用实例请求 可以直接自动拼接baseURL
        return instance
            .get(url, {
                params: params,
            })
            .then((res) => {
                if ( === 0) {
                    return res;
                }
            })
            .catch((err) => {
                //   捕获错误信息 timeout of 1000ms exceeded  捕获之后可以将这个换成轻提示
                // ();
                if ( === "timeout of 1000ms exceeded") {
                    alert("请求超时");
                }
                alert("服务器端错误");
            });
    },
    post(url, data) {
        return instance
            .post(url, data)
            .then((response) => {
                return response;
            })
            .catch((error) => {
                (error);
            });
    },
};

export default http;

页面


<template>
  <div class="img">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <div class="nav">
        <el-form-item label="账号" prop="namea">
          <el-input v-model=""></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model=""></el-input>
        </el-form-item>
        <el-form-item class="jizhu">记住密码
          <el-switch v-model=""></el-switch>
        </el-form-item>
        <button @click="denglu" class="but"> 登录</button>
      </div>
    </el-form>
  </div>
</template>
<script>
// 引入axios
import axios from 'axios';


export default {
  data() {
    return {
      ruleForm: {
        namea: '',  //账号
        pass: '',   //密码
        delivery: false  //记住密码
      },
      rules: {
        namea: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    denglu() {
      // axios数据请求
     
      ("/api?name=zhou&pass=zhou123&delivery=true") //路径换成自己的
        .then(response => {    //监听返回
          (, 'get 正常接口数据请求');
          // 存储token
           = "token=your_token";  // 存储在cookie
          ("token", "your_token");  // 存储在sessionStorage
          ("token", "your_token");  // 存储在localStorage

          // 我也不知道这个位置生效了没有
          let token = ("x-auth-token")
          if (token) {
            ["x-auth-token"] = token
          }
          // 判断输入的数据 和后台数据有没有对上
          if ( ===  &&  ===  &&  === true) {
            ('登录成功 ')
            // alert('成功')
            this.$({ path: "/Demo" });  //判断成功  跳转到新的页面
          } else {
            // alert('登录失败')
            ('登录失败')
          }
        })
        .catch(error => {
          (error, '失败');
        });
    }
  }
}
</script>
<style lang="less">
.img {
  height: 45rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../assets/')center center no-repeat;
  background-size: 100% 100%
}

.nav {
  border-radius: 10px;
  padding: 52px 54px 52px 0;
  width: 100%;
  background: linear-gradient(rgb(158, 116, 116), rgb(138, 138, 205));

}

.but {
  margin-left: 44px;
  margin-top: -22px;
  width: 83px;
  height: 40px;
  background-color: cornflowerblue;
}

.jizhu {
  margin-top: -17px;
  margin-left: 116px;
}</style>

和上边一样

相关文章