vite+vue跨域

vue3学习中被问到一个问题：怎么解决跨域？

在vue之前的web中，解决跨域的问题最常用有效的方法服务器代码中添加Access-Control-Allow-Origin的响应header，告诉浏览器不阻拦当前地址的请求。假设服务器不允许修改响应header，还有一种称为jsonp的技术，http://localhost?callback=func(),请求完成后自动执行回调函数，这种方法似乎不是很适合vue中使用。因此vue的前后端分离的项目中怎么解决跨域呢？

axios.get("http://localhost/api/request.php").then(function (response) {
  console.log(response);
});

 

 后端请求地址：http://localhost/request.php，前端地址使用vite默认的：http://127.0.0.1:5173/

由于项目使用vite构建，在vite的文档中找到了答案，在本地服务器中开启代理，将对后端服务器的请求，转化成对前端服务器的请求，如此则不存在跨域问题，前端服务器再去请求真正的后台服务器，最后前端服务器再将请求回来的数据返回给浏览器。

新增vite.config.js，在文件中添加以下代码（主要是server中proxy配置代理的配置）：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

 请求：

axios.get("/api/request.php").then(function (response) {
  console.log(response);
});

 

 

 

过程中踩的坑：

习惯了使用vscode的插件phpserver，在页面上右键直接运行当前php文件，显示正常

  然后将上面server的proxy配置的target改为 "http://localhost:3000/"，命令行却出错了，前端请求的地址也没有得到正确的响应。

 这个问题困扰我很久，然后换到xampp的 http://localhost/ 前端请求得到了正确的响应。