vue跨域请求

VUE单文件

<template>
  <div>
    <button @click="axi()">axios</button>
  </div>
</template>
<script setup>
import axios from "axios";
function axi(){
  axios({
    url:'/api/hisWeather/province',
    method:'get',
    params:{
      key:'f507ae99d73667d37531e8f8b3e12345'
    }
  }).then(res=>{
    console.log(res)
  }).catch(err=>console.log(err))
}
</script>

vue.config.js配置文件

注意，配置完成后要重启服务，不然不生效。

const { defineConfig } = require('@vue/cli-service')
const os = require("os");
let needHost = "0.0.0.0";
try {
  let network = os.networkInterfaces();
  needHost = network[Object.keys(network)[0]][1].address;//获取当前IP地址
} catch {
  needHost = "localhost";
}
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'/',// 项目部署的地址，开发的时候用/，生产的时候./，在历史模式中要是反着写开发的时候用./除了首页刷新都会错误，/生产后打开会白屏，或者路径错误。
  outputDir: 'dist',// 项目的打包地址（默认dist）,在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
  assetsDir: 'static',// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  productionSourceMap: false,// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  devServer: {// webpack-dev-server 代理配置相关配置
    open: true,// 编译后，是否后自动打开浏览器
    host:needHost,// 浏览器打开的域名
    https: false,// 是否是https
    port: 8080,// 端口号
    proxy: {// 代理匹配规则
      '/api': {// 请求时开始匹配的url
        target: 'http://apis.juhe.cn',// 要访问的跨域的域名
        //相当于把url传过来的/api/hisWeather/province过滤掉/api，就变成了http://apis.juhe.cn/hisWeather/province，但是请求的链接不会显示真实域名。
        ws: false,// 是否代理 websockets
        secure:false,// 是否https协议,false则http
        changeOrigin: true,// 是否跨域
        toProxy: false,// 是否传递绝对URL作为路径（对代理代理很有用），可不写。
        prependPath: true,// 默认值:true 指定是否将目标的路径添加到代理路径，可不写。
        ignorePath: false,// 默认值:false 指定是否忽略传入请求的代理路径，可不写。
        // agent:{},// 传递给http(s).request的对象，使用才写，不然报错。
        // ssl:{},// 传递给https.createServer()的对象，使用才写，不然报错。
        pathRewrite: {
          '^/api': ''//重写路径，请求的时候使用这个
        }
      },
    }
  },
})