vue3(十二)-基础入门之反向代理

一、反向代理

当遇到跨域问题时，可以通过反向代理解决跨域问题

1、创建一个与 package.json 同级的文件 vue.config.js

vue.config.js ：

代理以 /ajax 为开头的地址。代理服务器为 ：https://www.xxxx.com

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: {
      '/ajax': {
        target: 'https://www.xxxx.com',
        ws: true,
        changeOrigin: true
      }
      // '/foo': {
      //   target: ''
      // }
    }
  }
})

2、通过 axios 访问

<script>

import axios from 'axios'

export default {
  mounted() {
    axios
      .get(
        '/ajax/films/1331905?timeStamp=1703903766242&index=2&key=cd00f9'
      )
      .then((res) => {
        console.log(res)
      })
  }
}
</script>