Vux使用AjaxPlugin发送请求跨域问题解决

在main.js入口文件引入

import { AjaxPlugin } from 'vux'
Vue.use(AjaxPlugin)

组件中直接使用如下，会报错跨域的问题：

this.$http.get('https://xxx.cn/ruoyi/wx/sys/loadNavBar?state=1').then(({data}) => {
　　console.log(data)
})

 No 'Access-Control-Allow-Origin' header is present on the requested resource。

切记：这里配置完之后一定要重启项目，不然不会生效

解决如下：

假设，我需要请求的接口的入口为 https://xxx.cn

请求一接口如： https://xxx.cn/ruoyi/wx/sys/loadNavBar?state=1

修改 config/index.js 配置文件，修改 proxyTable 的值为如下:

proxyTable: {

　　'/': {

        target: 'https://xxx.cn',

        changeOrigin: true,

　　}

},

则组件中使用如下：

this.$http.get('/ruoyi/wx/sys/loadNavBar?state=1').then(({data}) => {
　　console.log(data)
})

2，假设，你需要请求的接口的入口为 https://xxx.cn/api，而代码里请求的 url 写的是 '/api'，则你需要使用 pathRewrite 来进行路径重写“/ruoyi/wx”，而不是直接改 traget

proxyTable: {
　　'/api': {
        target: 'https://xxx.cn',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/ruoyi/wx'
        }
　　}
},

this.$http.get('/api/sys/loadNavBar?state=1').then(({data}) => {
　　console.log(data)
})