【面试题】前端如何解决跨域问题（Vue项目）？

是什么？

可以参考该文章（讲的是后端解决跨域） Ajax跨域问题_@Dai的博客-CSDN博客

 index.vue文件

<template>
  <div class="hello">
    <button id="btn">请求接口</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  mounted() {
    document.getElementById("btn").onclick = () => {
      axios.get("http://127.0.0.1:8360/study/queryTest").then((res) => {
        console.log(111,res);
      });
    };
  },
};
</script>

出现了跨域问题

 为什么？

同源策略，前端的域名是localhost:8081，后端是127.0.0.1:8360，违背了同源策略，所以出现跨域问题。

如何解决？（前端）

首先在项目根目录创建一个vue.config.js文件，进行devServer的代理配置。

module.exports = {
    devServer: {
        open: true,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8360',
                changeOrgin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

 接口请求成功，前端解决跨域问题！！！