vue使用vite配置跨域以及环境配置详解

2024-10-21 18:13:16

如何配置跨域，代理域名

不管使用什么脚手架，配置代理都是绕不开的话题，下面是vite的代理

server: {
    proxy: {
      '/api': {
        target: 'https://baidu.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
 },

区分开发环境和生产环境，以及预发布环境

在根目录创建 .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配置了一个域名:

`.env.development`
// 开发环境配置
VITE_BASIC_URL = https://basic.com

可以做什么事

针对不同的环境可以去配置，例如页面的统一标题，参数常量…
下面根据环境配置不同的请求域名

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
  // 获取当前环境的配置
  const config = loadEnv(mode, './')
  return {
    server: {
      proxy: {
        '/basice': {
          target: config.VITE_BASIC_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/basice/, '')
        }
      }
    },
  }
})

以上是vite.config.js的配置，上面展示了在不同环境下去请求对应环境的域名并且配置代理进行跨域

补充：解决跨域常用方法

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

1、在vue.config.js中设置如下代码片段

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { // 配置跨域
    '/api':{
        target:`http://www.baidu.com`, //请求后台接口
        changeOrigin:true, // 允许跨域
        pathRewrite:{
            '^/api' : '' // 重写请求
        }
    }
  },
}

2、创捷axioss实例时，将baseUrl设置为 ‘/api’

const http = axios.create({
  timeout: 1000 * 1000000,
  withCredentials: true,
  BASE_URL: '/api'
  headers: {
     'Content-Type': 'application/json; charset=utf-8'
   }
})

二、JSONP解决跨域

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

<!DOCTYPE html>
       <html>
       <head>
           <meta charset="utf-8">
       </head>
       <body>
       <div id="textID"></div>
       <script type="text/javascript">
           function text_jsonp(req){
               // 创建script的标签
               var script = document.createElement('script');
               // 拼接 url
               var url = req.url + '?callback=' + req.callback.name;
               // 赋值url
               script.src = url;
               // 放入头部
               document.getElementsByTagName('head')[0].appendChild(script);
           }
       </script>
       </body>
       </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实现跨域

iframe(src){
            //数组
            if(Array.isArray(src)){
                this.docs.visible = true;
            }else{
                this.docs.visible = false;

            }
            this.link  = src
            if(this.docs.visible == false){
                if(this.$refs['ruleIframe'] && this.$refs['ruleIframe'].querySelector('iframe')){
                    this.$refs['ruleIframe'].querySelector('iframe').remove()    //删除自身
                }
                var iframe = document.createElement('iframe');
                iframe.width = '100%';
                iframe.height = '100%';
                iframe.setAttribute('frameborder','0')
                iframe.src = src;
                this.append(iframe)
            }

        },
        //创建元素 防止  获取不到 ruleIframe 递归
        append(iframe){
            if(this.$refs['ruleIframe']){
                this.$refs['ruleIframe'].appendChild(iframe);
                return
            }
            setTimeout(()=>{
                this.append(iframe);
            },500)
        },

总结

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

Vite多环境配置项目高定制化能力详解

目录业务背景多环境场景的业务形态 Vite多环境方案实现多模式文件配置自定义环境变量 Vite默认环境变量通过插件透传环境变量客户端环境差异定制效果图解决的业务场景思考业务背景近些年来,随着前端工程架构发展,使得前端项目中也能拥有如后端工程的模块能力.正所谓 “能力(越)越大(来),责任(越)越大(卷)”,现在的前端工程不仅仅要满足业务需求,还伴随更多复杂的环境适配问题,例如: api请求的域名会根据不同环境而不同: 线上环境和测试环境在打包策略有所不同「如线上要隔离sour
vue使用vite配置跨域以及环境配置详解

目录如何配置跨域,代理域名区分开发环境和生产环境,以及预发布环境可以做什么事补充:解决跨域常用方法一.VUE中常用proxy来解决跨域问题二.JSONP解决跨域三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上四.iframe实现跨域总结如何配置跨域,代理域名不管使用什么脚手架,配置代理都是绕不开的话题,下面是vite的代理 server: { proxy: { '/api'
Springmvc ajax跨域请求处理方法实例详解

上次给一个网站写网站前后端分离最后跪在ajax跨域上面了自己在网上找了个方法亲试可用记录一下写一个类继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha
面试突击之跨域问题的解决方案详解

目录 1.跨域三种情况 2.跨域问题演示 2.1 前端网站 2.2 后端接口 3.解决跨域问题 3.1 通过注解跨域 3.2 通过配置文件跨域 3.3 通过 CorsFilter 跨域 3.4 通过 Response 跨域 3.5 通过 ResponseBodyAdvice 跨域 4.原理分析演示项目源码总结跨域问题指的是不同站点之间,使用 ajax 无法相互调用的问题.跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据. 但这个保护机制也带来了新的问题
java 请求跨域问题解决方法实例详解

java 请求跨域问题解决方法实例详解新建Util类,在Util中添加下面方法: /* * response请求跨域公共设置 */ public static HttpServletResponse SetHttpServletResponse( HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(&qu
Java JWT实现跨域身份验证方法详解

目录 1.JWT简介 2.JWT的结构 2.1 头部(header) 2.2 载荷(payload) 2.3 签证(signature) 3.JWT的原则 4.JWT的用法 5.JWT的问题和趋势 6.整合JWT令牌 6.1 在模块中添加jwt工具依赖 6.2 创建JWT工具类 1.JWT简介 JWT(JSON Web Token)是目前流行的跨域认证解决方案,是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该信息可以被验证和信
JS前端同源策略和跨域及防抖节流详解

目录引言 jQuery中JSONP的实现防抖[重要] 缓存搜索的列表 1 定义全局缓存对象 2:将搜索结果存储到缓存对象中 3优先从缓存中获取搜索列表节流[重点] 防抖和节流的区别引言协议,域名,端口相同,就具有相同的源同源策略:浏览器提供的一个安全策略跨域的出现原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互解决跨域由两种方式:JSONP, CORS JSONP: 只支持GET请求通过script标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域
vue使用axios跨域请求数据问题详解

axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 但是很多时候,后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台,此时,前端就可以单独引入依赖解决该问题了. 引入依赖 cnpm install jsonp 导入到vu
使用jquery的jsonp如何发起跨域请求及其原理详解

前言本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的. 如果要在js里发起跨域请求,则要进行一些特殊处理了.或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将
Nginx解决前端访问资源跨域问题的方法详解

被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下. 该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论. 1.首先介绍Windows环境下Nignx的相关命令操作 nginx常用命令: 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止或关闭Nginx:nginx -s quit 配置文件修改重装载命令:nginx -s reload 在停
django解决跨域请求的问题详解

解决方案 1.安装django-cors-headers pip install django-cors-headers 2.配置settings.py文件 INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', # 注意顺序 ... ) #