vue跨域请求

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
VUE单文件
  1. <template>
  2.   <div>
  3.     <button @click="axi()">axios</button>
  4.   </div>
  5. </template>
  6. <script setup>
  7. import axios from "axios";
  8. function axi(){
  9.   axios({
  10.     url:'/api/hisWeather/province',
  11.     method:'get',
  12.     params:{
  13.       key:'f507ae99d73667d37531e8f8b3e12345'
  14.     }
  15.   }).then(res=>{
  16.     console.log(res)
  17.   }).catch(err=>console.log(err))
  18. }
  19. </script>
vue.config.js配置文件注意，配置完成后要重启服务，不然不生效。
  1. const { defineConfig } = require('@vue/cli-service')
  2. const os = require("os");
  3. let needHost = "0.0.0.0";
  4. try {
  5.   let network = os.networkInterfaces();
  6.   needHost = network[Object.keys(network)[0]][1].address;//获取当前IP地址
  7. } catch {
  8.   needHost = "localhost";
  9. }
  10. module.exports = defineConfig({
  11.   transpileDependencies: true,
  12.   publicPath:'/',// 项目部署的地址，开发的时候用/，生产的时候./，在历史模式中要是反着写开发的时候用./除了首页刷新都会错误，/生产后打开会白屏，或者路径错误。
  13.   outputDir: 'dist',// 项目的打包地址（默认dist）,在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
  14.   assetsDir: 'static',// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  15.   productionSourceMap: false,// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  16.   devServer: {// webpack-dev-server 代理配置相关配置
  17.     open: true,// 编译后，是否后自动打开浏览器
  18.     host:needHost,// 浏览器打开的域名
  19.     https: false,// 是否是https
  20.     port: 8080,// 端口号
  21.     proxy: {// 代理匹配规则
  22.       '/api': {// 请求时开始匹配的url
  23.         target: 'http://apis.juhe.cn',// 要访问的跨域的域名
  24.         //相当于把url传过来的/api/hisWeather/province过滤掉/api，就变成了http://apis.juhe.cn/hisWeather/province，但是请求的链接不会显示真实域名。
  25.         ws: false,// 是否代理 websockets
  26.         secure:false,// 是否https协议,false则http
  27.         changeOrigin: true,// 是否跨域
  28.         toProxy: false,// 是否传递绝对URL作为路径（对代理代理很有用），可不写。
  29.         prependPath: true,// 默认值:true 指定是否将目标的路径添加到代理路径，可不写。
  30.         ignorePath: false,// 默认值:false 指定是否忽略传入请求的代理路径，可不写。
  31.         // agent:{},// 传递给http(s).request的对象，使用才写，不然报错。
  32.         // ssl:{},// 传递给https.createServer()的对象，使用才写，不然报错。
  33.         pathRewrite: {
  34.           '^/api': ''//重写路径，请求的时候使用这个
  35.         }
  36.       },
  37.     }
  38.   },
  39. })
【转自：美国多ip服务器 http://www.558idc.com/mgzq.html 欢迎留下您的宝贵建议】
更多阅读