vue 跨域的解决办法

阿金要当大魔王~~

已于 2023-09-21 11:29:40 修改

阅读量1.8k

点赞数

分类专栏： vue 问题文章标签： vue.js javascript 前端

于 2023-09-02 13:53:19 首次发布

本文链接：https://blog.csdn.net/weixin_68266812/article/details/132637330

版权

vue 问题专栏收录该内容

57 篇文章 0 订阅

订阅专栏

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

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

module.exports = {
    devServer: {
      open: true, //是否自动弹出浏览器页面
      host: "0.0.0.0",  //也可以换成localhost      host: "localhost", 
    //   port: 8080,
      // https: true,
      hotOnly: false, 
       //以上的ip和端口是我们本机的;下面为需要跨域的
       proxy:{ //配置跨域
          '/api': {
              target: 'https://postman-echo.com/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="ruleForm.namea"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model="ruleForm.pass"></el-input>
        </el-form-item>
        <el-form-item class="jizhu">记住密码
          <el-switch v-model="ruleForm.delivery"></el-switch>
        </el-form-item>
        <button @click="denglu" class="but"> 登录</button>
      </div>
    </el-form>
  </div>
</template>
<script>
// 引入axios


import http from '../../requset.js'
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数据请求
         http.post("/api?name=zhou&pass=zhou123&delivery=true")
      
        .then(response => {    //监听返回
          console.log(response.data, 'get 正常接口数据请求');
          // 存储token
          document.cookie = "token=your_token";  // 存储在cookie
          sessionStorage.setItem("token", "your_token");  // 存储在sessionStorage
          localStorage.setItem("token", "your_token");  // 存储在localStorage

          // 我也不知道这个位置生效了没有
          let token = localStorage.getItem("x-auth-token")
          if (token) {
            config.headers["x-auth-token"] = token
          }
          // 判断输入的数据 和后台数据有没有对上
          if (this.ruleForm.namea === response.data.args.name && this.ruleForm.pass === response.data.args.pass && this.ruleForm.delivery === true) {
            console.log('登录成功 ')
            // alert('成功')
            this.$router.push({ path: "/Demo" });  //判断成功  跳转到新的页面
          } else {
            // alert('登录失败')
            console.log('登录失败')
          }
        })
        .catch(error => {
          console.log(error, '失败');
        });
    }
  }
}
</script>
<style lang="less">
.img {
  height: 45rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../assets/photo-1684341326866-ad9fdde2314c.webp')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>

main.js 按需引入

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


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

Vue.config.productionTip = false

Vue.use(ElementUI)

import dataV from '@jiaminghi/data-view'

Vue.use(dataV)
var axios = require('axios')
axios.default.baseURL = '/api'
 
Vue.prototype.$http = axios //正确的使用 


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

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

二 axios封装

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

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

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

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

// 响应拦截器
// 在刚好接收数据的时候执行
instance.interceptors.response.use(
    function (response) {
        console.log(response); //数据对象
        // 对响应数据做点什么
        //?  可以在这里过滤数据 要哪个数据返回哪个数据
        //?  可以在这处理状态码
        if (response.status === 200) {
            return response; //这里return出去的东西是return导get或者post方法的.then方法里
        } else if (response.status === 500) {
            // 抛错导catch
            // 这里404错误无法处理
            throw new Error("505 服务器端错误...");
        }
    },
    function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);
const http = {
    // 参数可以直接传递 params直接是对象
    get(url, params) {
        //使用实例请求 可以直接自动拼接baseURL
        return instance
            .get(url, {
                params: params,
            })
            .then((res) => {
                if (res.data.status === 0) {
                    return res;
                }
            })
            .catch((err) => {
                //   捕获错误信息 timeout of 1000ms exceeded  捕获之后可以将这个换成轻提示
                // console.log(err.message);
                if (err.message === "timeout of 1000ms exceeded") {
                    alert("请求超时");
                }
                alert("服务器端错误");
            });
    },
    post(url, data) {
        return instance
            .post(url, data)
            .then((response) => {
                return response;
            })
            .catch((error) => {
                console.log(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="ruleForm.namea"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model="ruleForm.pass"></el-input>
        </el-form-item>
        <el-form-item class="jizhu">记住密码
          <el-switch v-model="ruleForm.delivery"></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数据请求
     
      axios.post("/api?name=zhou&pass=zhou123&delivery=true") //路径换成自己的
        .then(response => {    //监听返回
          console.log(response.data, 'get 正常接口数据请求');
          // 存储token
          document.cookie = "token=your_token";  // 存储在cookie
          sessionStorage.setItem("token", "your_token");  // 存储在sessionStorage
          localStorage.setItem("token", "your_token");  // 存储在localStorage

          // 我也不知道这个位置生效了没有
          let token = localStorage.getItem("x-auth-token")
          if (token) {
            config.headers["x-auth-token"] = token
          }
          // 判断输入的数据 和后台数据有没有对上
          if (this.ruleForm.namea === response.data.args.name && this.ruleForm.pass === response.data.args.pass && this.ruleForm.delivery === true) {
            console.log('登录成功 ')
            // alert('成功')
            this.$router.push({ path: "/Demo" });  //判断成功  跳转到新的页面
          } else {
            // alert('登录失败')
            console.log('登录失败')
          }
        })
        .catch(error => {
          console.log(error, '失败');
        });
    }
  }
}
</script>
<style lang="less">
.img {
  height: 45rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../assets/photo-1684341326866-ad9fdde2314c.webp')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>