前端vue.config 添加后端本地地址,请求请求产生跨域

在Vue.js项目中，当你需要在前端代码中发送Ajax请求到位于本地服务器（如开发环境）的API时，可能会遇到跨域问题，因为浏览器出于安全考虑，不允许同源策略下的跨域请求。解决这个问题通常要在服务端设置允许特定域名访问，但在前端也可以通过修改`vue.config.js`文件来进行一些配置。

在`vue.config.js`里，你可以添加一个`devServer`对象，其中有一个`proxy`属性可以用来代理处理跨域。例如，如果你的后端API地址是`http://localhost:8000/api`，你可以这样配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // 你的后端地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' } // 将路径前缀 '/api' 替换为空字符串，以便匹配实际URL
      }
    },
  },
};

这个配置告诉开发服务器，当路由以`/api`开始时，所有的请求都转发到指定的目标地址，并且更改了原始请求的origin头，模拟跨域请求的行为。`pathRewrite`用于消除目标URL中的路径前缀，使得前端直接发出的URL看起来像是和后端在同一域名下。