Axios的应用中的问题

最新推荐文章于 2025-06-27 13:47:48 发布

南张门

最新推荐文章于 2025-06-27 13:47:48 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： axios axios跨域 axios问题 axios的referer

本文链接：https://blog.youkuaiyun.com/haochangdi123/article/details/81482030

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在Vue项目中如何处理Axios的跨域问题，通过设置vue-cli的proxyTable进行代理配置，并在不同环境绑定接口路径。同时，文章还探讨了如何使用Axios进行referer伪造，以应对jsonp请求的安全验证，提供了在webpack配置中的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue中设置Axios跨域

axios已经成为Vue官方推荐的ajax获取后台数据的方式，但是在使用中我们需要解决axios的跨域问题，我们在这里以vue-cli的2.x版本为例，来解决axios的跨域问题。

config/index.js中
我们通过设置dev配置的proxyTable来实现代理

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:3000/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''     //这里理解成用‘api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://127.0.0.1:3000/user/add'，直接写‘api/user/add’即可
          //或者继续往下看可以连api/都不用加
        }
      }
    }
  },

然后在config/dev.env.js中绑定dev环境的路径
(注意是是 '"development"'这样的模式，不要少写了引号)

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api"'  //这里的api就是我们在上面配置的http://127.0.0.1:3000/
})

然后在config/prod.env.js中绑定生产环境的路径

module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',
  API_HOST: '"https://www.baidu.com"'  //你真实的线上地址
})

在axios的统一配置文件中
根据环境的不同会自动匹配不同的接口路径


import axios from 'axios';
const baseURL = process.env.API_HOST;    // 当前环境的接口前缀
get(url, params) {  // get
    return axios({
      method: 'get',
      baseURL: baseURL,     //当前环境的接口路径
      url,
      params,    // get 请求时带的参数
      timeout: 5000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (response) => {
        return checkStatus(response);
      }
    )
  }

2.使用axios来进行referer伪造

jsonp是最为常见的一种跨域解决方法，并且是兼容性最好的一种方案。在我们平时抓取数据的时候我们通过会模拟jsonp的请求，但是jsonp请求为了安全起见，会进行refer的验证，这时我们就需要伪造referer了。

本来我们是应该直接jsonp去请求的，但是现在我们要在后台加入一层代理

ajax.js

import axios from 'axios';  //引入axios
export function getDiscList() {
  const url = '/api/getDisList'; //我们请求的地址(指向我们的后台代理)
 // 参数
  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'  // 因为本来是jsonp的请求，所以会返回jsonp的请求格式，因为我们采用了代理，所以将返回格式改为json
  });

 // 利用axios向代理请求
  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data);
  });
};

在build的webpack.dev.conf.js文件中

const axios = require('axios');
const express = require('express');
const app = express();

devServer: {
    before(app) {
        //axiosd调用代理的地址会触发回调函数，去调用真实数据的地址
      app.get('/api/getDisList', function (req, res) {
          //实际要调用的抓取数据的地址
        var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
        axios.get(url, {
            //设置头部，改变请求的referer和host
          headers: {
            referer: 'https://c.y.qq.com/', 
            host: 'c.y.qq.com'
          },
          params: req.query
        }).then((response) => {
          res.json(response.data); //response是api地址返回的，数据在data里。
        }).catch((err) => {
          res.json({
              code: '2',
              message: err
          })
        })
      })
    }
}

最后直接调用就可以了

import {getDiscList} from './ajax.js';
export default {
  data() {
    return {
    };
  },
  methods: {
    _getDiscList() {
      getDiscList().then((res) => {
        console.log(res);
      });
    }
  },
  created() {
    this._getDiscList();
  }
};