Vue devServer 开发时代理配置(解决跨域问题),附部署时nginx反向代理

最新推荐文章于 2024-10-05 09:03:26 发布

Coco_choco

最新推荐文章于 2024-10-05 09:03:26 发布

阅读量1w

点赞数 3

文章标签：前端 vue.js 服务器

本文链接：https://blog.csdn.net/aaassddd_a/article/details/121685193

版权

为什么跨域？因为浏览器是由同源策略的

devServer 就是vuecli在开发环境给我们提供的一个代理服务器,(使用的是 http-proxy-middleware)

devServer 就相当于用一个中间件服务器来访问，服务器是没有同源策略的

  devServer: {
    host: "localhost",//配置本项目运行主机
    port: 8080,//配置本项目运行端口
    //配置代理服务器来解决跨域问题
    proxy: {
      // ‘/api’ 的作用就是 替换 baseURL 的，假如这里我用的 localhost：8080 ,前端请求时直接用 /api 就行了
      //  ‘/api’ 只在前端请求时添加，而后端不需要添加 /api 这个路径
      "/api": {
        target: "http://localhost:3008", //配置要替换的后台接口地址
        changOrigin: true, //配置允许改变Origin
        ws: true, // proxy websockets
        pathRewrite: {
          "^/api": "/",
          //pathRewrite: {'^/api': '/'} 重写之后url为 http://localhost：8080/xxxx
          //pathRewrite: {'^/api': '/api'} 重写之后url为http://localhost：8080/api/xxxx
        },
      },
    },
  },

so。。这样开发时就没有跨域问题啦

但这只是 vuecli 在开发时才提供的服务器，那么部署后呢？

那就需要 nginx 反向代理啦

具体看文章https://blog.csdn.net/aaassddd_a/article/details/121696588?spm=1001.2014.3001.5501