使用axios请求第三方接口数据跨域问题

最新推荐文章于 2024-08-02 00:06:36 发布

m0_51252450

最新推荐文章于 2024-08-02 00:06:36 发布

阅读量269

点赞数 2

文章标签： ajax vue.js spring boot

本文链接：https://blog.csdn.net/m0_51252450/article/details/137998400

版权

文章讲述了在Vue项目中，前端通过axios调用第三方接口遇到跨域问题，通过配置dev环境下的proxyTable并重写URL路径，成功解决了Access-Control-Allow-Origin错误。

摘要由CSDN通过智能技术生成

问题称述：甲方提供第三方接口的地址，该接口包含我们需要的json数据，前端接收接口数据时，出现跨域问题

我这里要调用的第三方接口地址为[http://106.15.236.221:8888/test/data/warring.htm](http://106.15.236.221:8888/test/data/warring.htm)

在项目的main.js中全局配置axios

import Axios from 'axios'
Vue.prototype.axios = Axios //全局注册，使用方法为:this.$axios

找到vue项目的目录config > index.js 下面有个服务器配置dev 下面的 proxyTable：{}

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/urlData':{
        target:'http://106.15.236.221:8888',//设置成你调用的接口
        changeOrigin:true,
        pathRewrite:{
          '^/urlData':''//这里理解为用‘/urlData’代替target里面的地址，后面组件中文名调用接口时直接用urlData代替，
        }
      }
    },

在项目的目标文件中，axios请求里改一下url

<template>
  <div>
  <button @click="getData()">默认按钮</button>

    </div>        
</template>

<script>
import axios from "axios"
export default {
   data () {
    return {
      dataList: [],
    };
  },
  methods: {
    getData(){
      console.log("获取数据之前");
// measurePointApi.getUrlData().then(res=>{
 //   this.dataList =  res.data
 //   console.log("点击按钮获取到的数据是",  this.dataList);
 // })
      this.axios.get('/urlData/test/data/warring.htm').then(res=>{
      console.log("res数据是",res);
      console.log("res.data数据是",res.data);
      console.log("res.data.data数据是",res.data.data);
      this.dataList = res.data.data;
 })
 },
  }
}
</script>

修改之后请求接口就不会再报 Access-Control-Allow-Origin此类跨域错误

该方法引用VUE 使用axios请求第三方接口数据跨域问题解决-百度网盘下载-Java自学者论坛 - Powered by Discuz!