vue中解决跨域问题

1.在vue.config中配置proxy代理，

devServer: { proxy: { // 代理 "/api": { target: "https://www.echartsjs.com/examples", //访问的目标路径 ws: true, changOrigin: true, //实现跨域 pathRewrite: { '^/api': '' // 用/api代理target中的路径 }, // cookiePathRewrite: { // 是否携带cookie // '/svc-prod-app': '/' // } }, } }

2.发送网络请求。以axios.get()为例，在需要发送网络请求的文件中导入axios

import axios from 'axios'

也可以在main.js文件中配置全局的axios,这样可以直接在任何文件中使用axios

import axios from 'axios' Vue.prototype.$axios=axios this.$axios.get('api/data/asset/data/flare.json') .then(res => { const data = res.data; console.log(data) }).catch(error => { console.log(error) })

网络请求

axios.get('api/data/asset/data/flare.json') // api即在vue.config里配置的路径 .then(res => { const data = res.data; console.log(data) }).catch(error => { console.log(error) })

如果请求方式为post方式，只需将axios的请求方式改为post方式即可

axios({ methods:'post', url:'api/请求路径',`在这里插入代码片` params:{}, /*headers: { 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}*/ }).then(res = > {}) .catch(error => {})