vuecli3打包后出现跨域问题,前端配置拦截器无效的解决

如果在使用VueCLI3打包项目之后出现跨域问题，可以采用以下方法：

1. 修改vue.config.js文件

在VueCLI3项目根目录下新建/vue.config.js文件，并加入如下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上述代码代表可以在代码中使用'/api'路径来代替'http://localhost:3000'路径，实现了跨域请求。其中，changeOrigin为true表示开启(cors)跨域，pathRewrite表示将请求路径中的/api替换为空串。

示例

在代码中使用axios库请求数据时，可以以如下方式实现跨域请求：

axios.get('/api/data')
  .then((res) => {
    console.log(res.data)
  })
  .catch((err) => {
    console.log(err)
  })

1. 修改webpack配置文件

可以通过修改webpack的配置文件来实现解决跨域问题。

找到webpack.dev.conf.js 或 webpack.prod.conf.js文件，在devServer中添加如下代码：

module.exports = {
  devServer: {
    before: app => {
      app.use((req, res, next) => {
        res.header('Access-Control-Allow-Origin', '*')
        next()
      })
    }
  }
}

上述代码表示允许所有域名请求，从而实现了跨域访问。

示例

可以在开发时通过使用些三方库，如http-proxy-middleware来实现跨域请求：

// 安装http-proxy-middleware
npm install http-proxy-middleware --save-dev

在发送请求时，可以使用如下代码实现跨域请求：

// src/main.js
import proxyMiddleware from 'http-proxy-middleware'

app.use(
  proxyMiddleware('/api', {
    target: 'http://localhost:3000',
    changeOrigin: true,
    logLevel: 'debug',
    pathRewrite: {
      '^/api': ''
    }
  })
)

上述代码表示将 /api 替换为 http://localhost:3000。在代码中使用 axios 库时，则可以使用如下代码：

// src/App.vue
axios.get('/api/data')
  .then((res) => console.log(res.data))
  .catch((err) => console.error(err))

以上两种方案均能够实现VueCLI3打包后出现跨域问题的解决，在使用时根据自己的需求来选用。