vue,uniapp,vue3+vite项目配置h5跨域解决

4 篇文章 1 订阅

总结:

  • 首先发起的请求地址应该是本地ip地址发起的请求
  • 然后借由proxy将本地服务请求反向代理到正确的域名地址上

vue3+vite项目跨域配置

vite官方网址
在这里插入图片描述
根目录vite.config.js上配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import dns from 'dns'
// 重要
dns.setDefaultResultOrder('verbatim')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 跨域配置
  server: {
    proxy: {
    
      '/api': {
        target: 'https://blog.csdn.net/', //你要跨域访问的网址
        changeOrigin: true, // 允许跨域
        // 带选项写法:http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
        rewrite: (path) => path.replace(/^\/api/, '') 
      }
    },
  }
})

vue2,uniapp项目跨域配置

首先在cmd中查到自己ip地址
查询本机ip
项目请求域名换成自己的ip,例如:http://110.11.0.110:8080/user
然后在vue.config.js文件里设置

module.exports = {
  devServer: {
    https: false,
    host: '110.11.0.110', // 本地地址
    port: 8080,  // 本地端口
    disableHostCheck: true,
    proxy: {
      // 发起的所有接口
      '/': {
      	// 正确的服务器域名,最后的/带不带取决于api里面带没带/
        target: 'https://blog.csdn.net/', 
        changeOrigin: true,  //表示确定代理
        secure: false,
      }
    },
  },
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值