Vue项目axios调用api出现跨域问题Access to XMLHttpRequest at xxxxxxxxxx-CSDN博客

本文链接：https://blog.csdn.net/weixin_41201681/article/details/108551805

项目场景：

Vue开发

问题描述：

提示：Vue项目axios调用api出现跨域问题Access to XMLHttpRequest at xxxxxxxxxx
就是调用api时，api地址前面是本地地址，而不是正确的api地址
下图本人要调用的是
http://api.weatherdt.com/common/?area=xxxxx&type=xxxx&key=xxxxxx
在这里插入图片描述

解决方案：

本文写的是前端解决方法！！！
需要调用api：
http://api.weatherdt.com/common/?area=xxxxx&type=xxxx&key=xxxxxx

首先修改main.js

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'//最主要的一句

接着修改config文件夹下的index.js

proxyTable: {
      '/api': {
        target:'http://api.weatherdt.com/common', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{ 
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.weatherdt.com/common/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },

接着在调用页面写axios调用代码

testWeather() {
        axios.get('/?area=xxxxxx&type=xxxx&key=xxxxxxx').then((res) => {
          console.log('天气接口信息:',res)
        })
      },

接着重要一步！！！！
修改配置之后，需要关闭终端，重新启动，npm run dev
这样才能正确接收
在这里插入图片描述