在vue中使用proxy解决接口的跨域问题

最近在公司做一个项目的登录功能，需要请求接口，但也遇见了跨域问题，多方查找之后，我是用proxy解决了问题。

这里就要说一下什么是proxy，简单的说它就是一个代理，专门用于解决你的浏览器与你的服务器不在同一个主机的问题。

前端这里就需要用到vue.config.js文件

打开vue.config.js文件，在devServer下写入以下代码

module.exports = {
  // 相对于outputDir的静态资源(js、css、img、fonts)目录
  outputDir: "../www",
  publicPath: './',
  devServer: {//proxy代理
    proxy: {
      '/api': {
        target: 'http://48.107.186.189',
        changeOrigin: true
      },
    }
  }
}

target就是你的访问的目标地址，changeOrigin则可以让你使用/api来代理target中的地址

在调用接口文件中使用：

import axios from "axios"
//领料出库接口
export function getpickplant() {
    return axios.get('/api/getPickPlant')
}

/api/getPickplant取代了 http://48.107.186.189/getPickplant，方便于书写，同时如果有其他地址，也便于区分。