中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › vue使用vite配置跨域以及环境配置详解

[前端] vue使用vite配置跨域以及环境配置详解

2021 0
王子 2022-10-21 15:38:16 | 显示全部楼层 |阅读模式
目录

    如何配置跨域，代理域名区分开发环境和生产环境，以及预发布环境可以做什么事补充：解决跨域常用方法
      一、VUE中常用proxy来解决跨域问题二、JSONP解决跨域 三、CORS是跨域资源共享（Cross-Origin Resource Sharing），以 ajax 跨域请求资源，支持现代浏览器，IE支持10以上四、iframe实现跨域
    总结


如何配置跨域，代理域名

不管使用什么脚手架，配置代理都是绕不开的话题，下面是vite的代理
  1. server: {
  2.     proxy: {
  3.       '/api': {
  4.         target: 'https://baidu.com',
  5.         changeOrigin: true,
  6.         rewrite: (path) => path.replace(/^\/api/, '')
  7.       }
  8.     }
  9. },
复制代码
区分开发环境和生产环境，以及预发布环境

在根目录创建 .env[mode] 文件，在项目执行 npm run dev 的时候vite会自动去读取.env.development文件里面的配置，执行npm runbuild进行打包之后也会自动将.env.production的内容打包进去，这里注意的是，如果你想进入预发布模式的话需要在打包的时候进行mode配置:npm run build --mode staging
公共的 .env
开发环境 .env.development
生产环境 .env.production
预发布环境 .env.staging


在.env.development配置了一个域名:
  1. `.env.development`
  2. // 开发环境配置
  3. VITE_BASIC_URL = https://basic.com
复制代码
可以做什么事

针对不同的环境可以去配置，例如页面的统一标题，参数常量…
下面根据环境配置不同的请求域名
  1. import { defineConfig, loadEnv } from 'vite'
  2. export default defineConfig(({ mode }) => {
  3.   // 获取当前环境的配置
  4.   const config = loadEnv(mode, './')
  5.   return {
  6.     server: {
  7.       proxy: {
  8.         '/basice': {
  9.           target: config.VITE_BASIC_URL,
  10.           changeOrigin: true,
  11.           rewrite: (path) => path.replace(/^\/basice/, '')
  12.         }
  13.       }
  14.     },
  15.   }
  16. })
复制代码
以上是vite.config.js的配置，上面展示了在不同环境下去请求对应环境的域名并且配置代理进行跨域

补充：解决跨域常用方法


一、VUE中常用proxy来解决跨域问题

1、在vue.config.js中设置如下代码片段
  1. module.exports = {
  2.   dev: {
  3.     // Paths
  4.     assetsSubDirectory: 'static',
  5.     assetsPublicPath: '/',
  6.     proxyTable: { // 配置跨域
  7.     '/api':{
  8.         target:`http://www.baidu.com`, //请求后台接口
  9.         changeOrigin:true, // 允许跨域
  10.         pathRewrite:{
  11.             '^/api' : '' // 重写请求
  12.         }
  13.     }
  14.   },
  15. }
复制代码
2、创捷axioss实例时，将baseUrl设置为 ‘/api’
  1. const http = axios.create({
  2.   timeout: 1000 * 1000000,
  3.   withCredentials: true,
  4.   BASE_URL: '/api'
  5.   headers: {
  6.      'Content-Type': 'application/json; charset=utf-8'
  7.    }
  8. })
复制代码
二、JSONP解决跨域

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
  1. <!DOCTYPE html>
  2.        <html>
  3.        <head>
  4.            <meta charset="utf-8">
  5.        </head>
  6.        <body>
  7.        <div id="textID"></div>
  8.        <script type="text/javascript">
  9.            function text_jsonp(req){
  10.                // 创建script的标签
  11.                var script = document.createElement('script');
  12.                // 拼接 url
  13.                var url = req.url + '?callback=' + req.callback.name;
  14.                // 赋值url
  15.                script.src = url;
  16.                // 放入头部
  17.                document.getElementsByTagName('head')[0].appendChild(script);
  18.            }
  19.        </script>
  20.        </body>
  21.        </html>
复制代码
三、CORS是跨域资源共享（Cross-Origin Resource Sharing），以 ajax 跨域请求资源，支持现代浏览器，IE支持10以上

在CORS请求，头部信息中包含以下三个字段：
Access-Control-Allow-Origin： 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求，
Access-Control-Allow-Credentials： 可选，值为布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true。如果要发送Cookie，Access-Control-Allow-Origin必须设置为必须指定明确的、与请求网页一致的域名
Access-Control-Expose-Headers：可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定

四、iframe实现跨域


  1. iframe(src){
  2.             //数组
  3.             if(Array.isArray(src)){
  4.                 this.docs.visible = true;
  5.             }else{
  6.                 this.docs.visible = false;
  8.             }
  9.             this.link  = src
  10.             if(this.docs.visible == false){
  11.                 if(this.$refs['ruleIframe'] && this.$refs['ruleIframe'].querySelector('iframe')){
  12.                     this.$refs['ruleIframe'].querySelector('iframe').remove()    //删除自身
  13.                 }
  14.                 var iframe = document.createElement('iframe');
  15.                 iframe.width = '100%';
  16.                 iframe.height = '100%';
  17.                 iframe.setAttribute('frameborder','0')
  18.                 iframe.src = src;               
  19.                 this.append(iframe)
  20.             }
  22.         },
  23.         //创建元素 防止  获取不到 ruleIframe 递归
  24.         append(iframe){
  25.             if(this.$refs['ruleIframe']){
  26.                 this.$refs['ruleIframe'].appendChild(iframe);
  27.                 return
  28.             }
  29.             setTimeout(()=>{
  30.                 this.append(iframe);
  31.             },500)   
  32.         },
复制代码
总结

到此这篇关于vue使用vite配置跨域以及环境配置的文章就介绍到这了,更多相关vite配置跨域及环境配置内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

王子

创始人

关注
  • 1101
    主题
  • 105
    粉丝
  • 59
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天