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 => {})