vue、axios、webpack跨域设置代理不生效问题

Question

配置config/index.js

'use strict'
// Template version: 1.3.1
const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { 
          '^/api': '' 
        }
      }
    },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
overlay

    showEslintErrorsInOverlay: false,
    cssSourceMap: true,

  },
}

请求部分

created() {
    this.$axios.get("/api/querylAll/list.do").then(response => {
      console.log(response);
    });
  }

结果仍然没有改变请求域名

期望值：http://localhost:8080/queryAll/list.do

Answer 1

键值proxyTable更改为proxy。

Answer 2

我都这样写的

Answer 3

一定要记得重新跑项目

Answer 4

最容易忽视的是webpack版本问题，proxyTable 或 proxy都试一下

Answer 5

没问题吧。proxyTable target 是代理的目的地址，你要把请求发送到代理服务器，代理服务器再替你将请求发送到 target(可用于避免跨域问题)。不想要代理的话，直接将 axios baseURL 设为 http://localhost:8080 即可。

Answer 6

你接口用的是相对路径 肯定是8082端口

换成绝对路径

去掉api 也很简单

把这里改掉即可