cli和vite通过代理实现跨域

一、基础概念

        url组成成分：协议://域名:端口， 目标接口与当前浏览器通信时，只要三者任意一个发生变化，我们都称之为跨域。

二、问题

        使用vue项目时，我们大多时候都会使用axios，而axios我们都会配置baseUrl，然后出现下面报错！!  这是因为浏览器的同源策略造成的跨域问题，同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

三、脚手架cli解决

        vue项目地址:   http://localhost:8080

        后端接口:         http://localhost:8888/test

       

        (1)在根目录下面新建vue.config.js文件，并将如下内容配置上去，修改配置文件记得重启项目

module.exports = {
    devServer: {
        proxy: {
            '/api': {    //只要有api就走这
                target: 'http://localhost:8888/',    //目标地址
                changeOrigin: true,    //是否开启跨域
                pathRewrite: {
                    '^/api': ''    //将api替换成''
                }
            }
        }
    }
} 

           (2)axios二次封装

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',
    timeout: 3000
})

export default request

             (3)在App.vue中使用

<template>
  <div id="app">

  </div>
</template>

<script>
import request from './request/index.js'
export default {
  name: 'App',
  created() {
    this.getData()
  },
  methods: {
    //获取后端数据
    async getData() {
      let res = await request({
        url: '/test',
        method: 'GET',
      })
      console.log('res:', res)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

四、vite解决

vue项目地址：        http://localhost:5173

后端接口:         http://localhost:8888/test

(1)根目录下找到vite.config.js文件，并将相关配置写上去，记得重启项目

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {    //只要有api就走这
        target: 'http://localhost:8888/',    //目标地址
        changeOrigin: true,    //是否开启跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

  (2)axios二次封装

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',
    timeout: 3000
})

export default request

     (3)在App.vue中使用，其实也就是vue3的语法

<template>
  <div></div>
</template>
<script setup>
import request from './request';
import { onMounted } from 'vue'
//获取数据
const getData = async () => {
  let res = await request({
    url: '/test',
    method: 'GET'
  })
  console.log('res:', res)
}
onMounted(() => {
  getData()
})
</script>
<style scoped>
</style>