vue跨域解决方案 简书,vue处理跨域的几种方式
跨域是指当一个资源访问另一个不同域名的资源或者相同域名的不同端口时，会发出跨域请求。本文主要介绍使用vite进行vue跨域配置和环境配置的相关信息。有需要的可以参考一下。
目录
如何配置跨域，通过代理域名区分开发环境和生产环境，在预发布环境下可以做什么。补充：解决VUE跨域问题的常用方法，解决跨域问题的代理，解决跨域问题的JSONP，解决跨域问题的CORS，跨域请求资源的ajax，支持现代浏览器，IE支持10个以上，iframe。
如何配置跨域，代理域名
无论使用什么脚手架，配置代理都是一个不可回避的话题。这里是vite的代理。
服务器：{
代理服务器：{
/api: {
目标： https://baidu.com ，
changeOrigin:真的，
重写：(路径)=path.replace(/^\/api/，)
}
}
},
区分开发环境和生产环境，以及预发布环境
在根目录中创建.env[mode]文件。vite将自动读取。env.development文件，而。在npm runbuild之后，将自动打包env.production。请注意，如果要进入预发布模式，需要在打包期间配置该模式：npm运行构建模式登台。
公共电话.env
开发环境.env.development
生产环境.env.production
预发布环境.env.staging
域名在env.development中配置：
` . env.development
//开发环境配置
https://basic.com
可以做什么事
可以针对不同的环境进行配置，比如页面的统一标题，参数常量…
下面，根据环境配置不同的请求域名。
从“vite”导入{ defineConfig，loadEnv }
导出默认定义配置(({ mode })={
//获取当前环境的配置
const config=loadEnv(mode，。/)
返回{
服务器：{
代理服务器：{
/basice: {
目标：配置。VITE_BASIC_URL，
changeOrigin:真的，
重写：(路径)=path.replace(/^\/basice/，)
}
}
},
}
})
以上是vite.config.js的配置，展示了如何在不同环境下请求对应环境的域名，配置代理跨域。
补充：解决跨域常用方法
一、VUE中常用proxy来解决跨域问题
1.在vue.config.js中设置以下代码片段
模块.导出={
开发人员：{
//路径
资产子目录：静态，
assets public path:“/”，
ProxyTable: {//配置跨域
/api:{
Target: ` http://www.baidu.com ，//请求后台接口
ChangeOrigin:true，//允许跨域
路径重写：{
/API : //重写请求
}
}
},
}
2.创建axioss实例时，将baseUrl设置为“/API”
const http=axios.create({
超时：1000 * 1000000，
withCredentials: true，
基本URL:“/API”
标题：{
Content-Type“:”应用程序/JSON；charset=utf-8
}
})
二、JSONP解决跨域
Jsonp(带填充的json)是JSON的一种‘使用模式’，允许网页从其他域名(网站)获取信息，即跨域读取数据。
！声明文档类型
超文本标记语言
头
meta charset=utf-8
/头
身体
div id=textID/div
脚本类型=文本/javascript
函数text_jsonp(req){
//创建脚本的标签
var script=document . createelement( script )；
//拼接url
var url=req.url ？callback= req . callback . name；
//分配url
script.src=url
//放在头上
document . getelementsbytagname( head )[0]。appendChild(脚本)；
}
/脚本
/body
/html
三、CORS是跨域资源共享（Cross-Origin Resource Sharing），以 ajax 跨域请求资源，支持现代浏览器，IE支持10以上
在CORS请求中，标题信息包含以下三个字段：
Access-Control-Allow-Origin:此字段是必需的。它的值或者是请求时的Origin字段的值，或者是*号，表示接受任何域名的请求，
访问控制允许凭证：可选，值为布尔值，表示是否允许发送饼干。默认情况下，Cookie不包括在克-奥二氏分级量表请求之中。设为没错，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为没错。如果要发送饼干，访问控制允许来源必须设置为必须指定明确的、与请求网页一致的域名
访问控制公开标题：可选106 .克-奥二氏分级量表请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：缓存控制、内容语言、内容类型、过期时间、上次修改时间、杂注。如果想拿到其他字段，就必须在访问控制公开标题里面指定
四、iframe实现跨域
iframe(src){
//数组
if(Array.isArray(src)){
这个。文件。可见=真；
}否则{
这个。文件。可见=假；
}
this.link=src
if(this.docs.visible==false){
如果（这个refs[ruleIframe] this .$refs[ruleIframe].查询选择器( iframe ){
这个refs[ruleIframe].querySelector(iframe ).remove() //删除自身
}
var iframe=文档。createelement(“iframe”)；
iframe。宽度= 100% ；
iframe。高度= 100% ；
iframe。设置属性(“框架边框”，“0”)
iframe.src=src
这个。追加(iframe)
}
},
//创建元素防止获取不到ruleIframe递归
追加(iframe){
如果（这个. refs $ refs[ rule iframe ]){
这个refs[ruleIframe].appendChild(iframe)；
返回
}
setTimeout(()={
这个。append(iframe)；
},500)
},
总结
到此这篇关于某视频剪辑软件使用轻快地配置跨域以及环境配置的文章就介绍到这了，更多相关轻快地配置跨域及环境配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。