解决跨域,vue.config.js中配置devServer

最新推荐文章于 2024-10-14 14:23:49 发布

原创最新推荐文章于 2024-10-14 14:23:49 发布 · 896 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue

本文介绍如何在Vue项目中使用vue.config.js文件进行跨域配置，并通过设置代理来简化开发环境中的API调用。文章详细展示了如何定义代理规则以解决跨域问题，并解释了如何将实际请求URL映射到开发服务器。

在vue.config.js文件中

const port = 7000
module.exports = defineConfig({
  transpileDependencies: true,

  outputDir: 'dist',
  assetsDir: 'static',

  devServer: {
    hot: true,
    port: port,
    proxy: {
      //设置devServe解决跨域问题
      "/api/home":{
        // 我们需要告诉devserver帮我们解决那个地址的跨域
        target:"http://localhost:5100",
        /*也可以写成http://192.168.0.1:5100   上面是服务在本地跑的时候 */
        //控制服务器收到的请求头中的Host的值，如果不加(changeOrigin:flase) host的只为6040，如果加了(changeOrigin;true)以后值为5040
        changeOrigin:true,
        // 重写路径
        pathRewrite:{
            "^/api":""
        }
      },
    }
  },
  publicPath: "/",
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    }
  },
})