首页vue3 element-plus解决core跨域

vue3 element-plus解决core跨域

时间: 2023-10-24 22:23:11 浏览: 414

要解决跨域问题，可以在 Vue3 中使用 `http-proxy-middleware` 中间件来代理请求，同时在 Element-Plus 中也提供了相关的配置。首先，在 Vue3 项目中安装 `http-proxy-middleware`： ```bash npm install http-proxy-middleware --save-dev ``` 然后在 `vue.config.js` 中配置代理： ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = { devServer: { before: app => { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:3000', // 根据实际情况填写 changeOrigin: true }) ); } } }; ``` 这样所有 `/api` 开头的请求都会被代理到 `http://localhost:3000`。在 Element-Plus 中，可以通过 `ElMessage`、`ElMessageBox` 等组件的 `http` 属性设置请求头部信息，如下所示： ```html <template> <el-button @click="getData">获取数据</el-button> </template> <script> import axios from 'axios'; export default { methods: { async getData() { try { const res = await axios.get('/api/data', { http: { withCredentials: true } }); console.log(res); } catch (error) { console.log(error); } } } }; </script> ``` 这里的 `withCredentials: true` 表示携带跨域请求中的 Cookie。

阅读全文