使用vue init webpack your-project-name初始化vue项目时,项目结构在此就不多说。里面config文件夹下index.js文件中有个proxyTable配置,此配置是代理转发所用。当向服务器端口(与vue项目不同端口,即跨域请求)请求数据时,代码是某个vue页面中methods下axios.get('/users').then((res)=>{console.log(res);}),即转发到http://localhost:3000下获取数据,此时请求数据失败,因为跨域导致,需要在build/webpack.dev.conf.js中配置devServer: {
    proxy: config.dev.proxyTable
  },使跨域请求生效。

如果是向本地json或者mock请求数据则不需要配置。

config/index.js中

  dev: {

    // Paths
    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {
      '/users':{
          target:'http://localhost:3000',
          changeOrigin: true
      }
    },

...................

使用axios.get('/users').then((res)=>{console.log(res);})向后端请求数据是,本地地址并未被转发,也就是proxyTable未生效。

这是怎么解决呢,请教了一下大神。

build/webpack.dev.conf.js中

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,
  devServer: {
    proxy: config.dev.proxyTable
  },

.......................

在这里加上如上一段,是proxyTable配置生效。

Logo

前往低代码交流专区

更多推荐