前端配置代理解决跨域问题

webpack配置代理

webpack.config.js中配置

vue脚手架构架的项目(vue-cli@3.**下)项目根目录下新建 vue.config.js 文件中配置

    module.exports = {
     
    devServer: {
     
        host: "localhost", //要设置当前访问的ip 否则失效
        port: 8081,//当前web服务端口
        open: false, //浏览器自动打开页面
        //可设置多个代理
        proxy: {
     
          '/api': {
       //'/api'是要转发的地址 如果API中包含'/api' 则开始匹配
            target: 'http://127.0.0.1:8080',//目标地址（后端接口地址）
            ws: true,//是否代理websocket
            changeOrigin: true,//是否跨域
            pathRewrite: {
     
              '^/api': ''//url重写
              // 这里 /api 相当于 http://127.0.0.1:8080
              // 如果要请求  http://127.0.0.1:8080/login 请求时 写成 /api/login
              //若果使用axios 可以配置 axios.defaults.baseURL='/api' 请求时直接写 /login
            }
          }
        }
    }
}

http-proxy-middleware配置代理

webpack.config.js 文件没有暴露在外面的时候可以使用该方法

• 安装 http-proxy-middleware
• src下新建setupProxy.js

const {
     createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function (app) {
     
    app.use('/api', createProxyMiddleware({
     
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
     
            '^/api': '',
        },
    }))
}