vue使用axios跨域访问实现及问题分析

1、安装axios

npm -install axios

2、main.js引入axios
两种方式，点击这里查看

3、在webpack配置文件index.js中配置代理

    var path = require('path')
    
    module.exports = {
      build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/vue-admin/',
        productionSourceMap: true,
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report,
      },
      dev: {
        env: require('./dev.env'),
        port: 8081,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        proxyTable: {
            '/api': {
                target:'http://127.0.0.1:8088', // 需要请求的第三方接口
                changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite:{  // 路径重写，
                    '^/api': '/'  // 替换target中的请求地址，如：访问http://127.0.0.1:8088这个地址的时候直接写成/api即可。
                }
            }
        }，
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        cssSourceMap: false
      }
    }

注意，我的项目运行在开发环境，所以在dev:{}中添加

4、在.vue文件中跨域访问

methods: {
	//获取已办任务列表
    getTasks() {
    //这里通过结合 vue-axios方式使用axios，如果通过将axios改写为vue的原型属性的方式使用axios，需要将下面代码中的 this.axios 修改为  this.$http 即可，其他不变
          this.axios.get('/api/activiti/doneTask').then((res) => {
          this.doneTaskList=res.data;
        }).catch((error) => {
                    alert(error);
       });
  },
},

5、显示返回结果，说明跨域访问成功
在这里插入图片描述

遇到的问题分析：
1、返回错误信息：Error: Request failed with status code 404
分析：查看请求路径，发现代理未生效，请求路径不是真正要访问的路径
参考解决办法：
（1）前台和后台需要同时允许跨域，后台接口使用@CrossOrigin注解。
（2）在build目录下webpack.dev.conf.js文件添加一下内容，让proxyTable配置生效。

module.exports = merge(baseWebpackConfig, {
	  devServer: {
	  	proxy: config.dev.proxyTable
	  },
 }

（3）http代理的插件有缓存，proxyTable的修改没有及时生效，此时需重新启动项目，如果还是不行，就更改项目端口后再启动。
（4）手动执行下面命令

npm run dev

（5）proxyTable中target处配置的地址不能正常访问，将这里配置的地址复制出来，通过浏览器地址栏直接访问，就可以判断是否为这个原因。

2、提示error，network error，通过f12查看，发现其实已经有数据返回了。
参考解决办法：
跨域访问没有设置代理，参照本文正确设置代理即可

vue使用axios跨域访问实现及问题分析

猜你喜欢